How to create a stunning visual sitemap in Gutenberg without a plugin

Do you want to build a clear and visually appealing roadmap to navigate your website? Ditch the plugin hunt, because creating a stunning visual sitemap in Gutenberg is just a sprinkle of custom CSS away!

Build the tree

• Embrace the List Block, your trusty foundation. Add a class named “tree” to give it some style potential.
• Populate the branches: Each list item represents a page or section in your sitemap. Remember, indentation creates sub-levels!
• Bold is beautiful: Make each list item text bold. It’s a secret handshake with our magic CSS.

Sprinkle the CSS magic

Copy and paste the provided CSS code into your theme’s stylesheet or a custom CSS plugin. Now, watch the transformation unfold.

.tree, .tree ul, .tree li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.tree {
    margin: 0 0 1em;
    text-align: center;
}

.tree, .tree ul {
    display: table;
}

.tree ul {
  width: 100%;
}

.tree li {
    display: table-cell;
    padding: .5em 0;
    vertical-align: top;
}
      
.tree li:before {
    outline: solid 1px #666;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.tree li:first-child:before {
    left: 50%;
}

.tree li:last-child:before {
    right: 50%;
}

.tree strong {
    border: solid .1em #666;
    border-radius: .2em;
    display: inline-block;
    margin: 0 .2em .5em;
    padding: .2em .5em;
    position: relative;
}

.tree ul:before, .tree strong:before {
    outline: solid 1px #666;
    content: "";
    height: .5em;
    left: 50%;
    top: -.55em;
    position: absolute;
}

.tree ul:before {
    top: -.5em;  
}

• Goodbye, boring bullets: Sayonara, list styles! Our CSS takes over, crafting a sleek and organized tree structure.
• Connecting the dots: Lines link parent and child elements visually, guiding users through your sitemap effortlessly.
• Bold and outlined: Each bold list item gets a stylish frame, emphasizing its importance in the sitemap hierarchy.

Remember the essentials

• Link those branches! Connect list items to their corresponding pages for seamless navigation.
• Customize and tweak: Don’t be afraid to adjust the CSS colors, line thickness, or padding to match your website’s aesthetic.

Voila! You’ve conjured a captivating visual sitemap, all within the familiar embrace of Gutenberg and some clever CSS: no plugins, no fuss, just pure sitemap satisfaction.

Bonus Tip: Check out the original code pen for more inspiration and customization options.

See the Pen Tree view from unordered list by Ross Angus (@ross-angus) on CodePen.

So, ditch the plugin maze and embrace the power of a little CSS finesse. Your website’s visual sitemap awaits, ready to guide visitors with clarity and style!

Use this hook to include the styles and scripts for the editor:

add_action( 'enqueue_block_assets', 'enqueue_gutenberg_scripts' );

function enqueue_gutenberg_scripts() {
	// Register the block scripts.
	wp_enqueue_script(
		'main-gutenberg',
		get_template_directory_uri() . '/gutenberg/main/blocks.js',
		array( 'wp-edit-post', 'wp-element', 'wp-components', 'wp-plugins', 'wp-data' ),
		'1.0.1',
		false
	);

	// Register the block editor stylesheet.
	// If you want to add additional functionality in the editor
	// you can do it here.
	wp_enqueue_style(
		'main-editor-styles', // label
		get_stylesheet_directory_uri() . '/gutenberg/editor.css',	// CSS file
		array()
	);

	// Register the front-end stylesheet.
	// The style is for both front-end and back-end.
	wp_enqueue_style(
		'main-block-styles',
		get_stylesheet_directory_uri() . '/gutenberg/style.css',
		array()
	);
}

Share this article and spread the word! Let’s show everyone that Gutenberg can craft beautiful sitemaps without plugins.