Practice: Adding full site editing to existing themes

This is a practice lesson with step by step instructions where we will be adding support for full site editing to the default theme, Twenty Twenty.
We do this while keeping the PHP based theme for users who has not activated full site editing.

We are going to use blocks to recreate the blog, single post, footer, and header.

In this lesson, we are going to work in our code editors, because I want you to see the differences once we reach the lesson about the site editor.

But before we start, please remember that this is an experimental feature, and what I will show you might not work in a few weeks or months from now.

  • Download and install the renamed default theme called Twenty Twenty Combo, that you can find in the course material.
  • Make sure that full site editing is enabled.
  • Open the theme in your favorite code editor.

First, we create the two required folders that I brought up in the theme structure lesson: block-templates, and block-template-parts.

Inside the block-templates folder, create a blank index.html file.

Inside the block-template-parts folder, create the header.html and footer.html files.

The folder structure of our theme with the newly created files.

Open index.html in your code editor. We are going to add our two template parts using the block comment wp:template-part:

<!-- wp:template-part {"slug":"header","theme":"twentytwenty-combo"} /--> <!-- wp:template-part {"slug":"footer","theme":"twentytwenty-combo"} /-->

If you preview the website now, you will see a blank page, because our files are created but still empty. If you see a message saying “template part not found”, then you probably have a typo somewhere.

Inside index.html, we want to show our post loop between our two template parts. We can add that with wp:query and wp:query-loop.

<!-- wp:query --> <!-- wp:query-loop --> <!-- /wp:query-loop --> <!-- /wp:query -->

We now need to decide what we want to show in our loop. In Twenty Twenty, categories are shown above the post title, but we do not have a category block yet, so we are skipping that.

Inside the query-loop we are going to add the post title block:

<!-- wp:post-title /-->

Followed by a columns block with 3 columns:

<!-- wp:columns --> <div class="wp-block-columns"> <!-- wp:column --> <div class="wp-block-column"> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"></div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"></div> <!-- /wp:column --></div> <!-- /wp:columns -->

This is because Twenty Twenty displays three types of meta information next to each other below the post title:

A screenshot of Twenty Twenty that shows the post title, post author, post date, and the number of comments.

Inside the first column, we are placing the post author block, with the byline: By.

<!-- wp:post-author {"byline":"By"} /-->

In the middle column we include the post date:

<!-- wp:post-date /-->

And in the third column, we add the post comment count:

<!-- wp:post-comments-count /-->

The complete code for our meta information is:

<!-- wp:columns --> <div class="wp-block-columns"> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:post-author {"byline":"By"} /--> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:post-date /--> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:post-comments-count /--> </div> <!-- /wp:column --> </div> <!-- /wp:columns -->

Below the post meta, we add the featured image, post content and the tags:

<!-- wp:post-featured-image /--> <!-- wp:post-content /--> <!-- wp:post-tags /-->

Between each post, Twenty Twenty also adds a wide separator:

<!-- wp:separator {"className":"is-style-wide"} --> <hr class="wp-block-separator is-style-wide"/> <!-- /wp:separator -->

Between the closing wp:query_loop and the closing of wp:query, we place
the pagination for our blog:

<!-- wp:query-pagination /-->

When you save the file and preview the blog, it might look something like this:

A screenshot of the blog after we have added our code. The post title is aligned all the way to the left, and the meta information has the wrong color.

This is not the result that we want, and it is because Twenty Twenty does not have any styles for these new blocks.
It is also because not all full site editing blocks are complete.

For now, we can correct the position of the post title and the meta information by adding a group block as a wrapper.

After adding the group block as a wrapper, the post title and meta information align better with the width of the content.

We do the same for the tags that are also positioned to the left.

The full code of our index.html is:

<!-- wp:template-part {"slug":"header","theme":"twentytwenty-combo"} /--> <!-- wp:query --> <!-- wp:query-loop --> <!-- wp:group --> <div class="wp-block-group"> <div class="wp-block-group__inner-container"> <!-- wp:post-title /--> <!-- wp:columns --> <div class="wp-block-columns"> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:post-author {"byline":"By"} /--> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:post-date /--> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:post-comments-count /--> </div> <!-- /wp:column --> </div> <!-- /wp:columns --> </div> </div> <!-- /wp:group --> <!-- wp:post-content /--> <!-- wp:group --> <div class="wp-block-group"> <div class="wp-block-group__inner-container"> <!-- wp:post-tags /--> </div> </div> <!-- /wp:group --> <!-- wp:separator {"className":"is-style-wide"} --> <hr class="wp-block-separator is-style-wide" /> <!-- /wp:separator --> <!-- /wp:query-loop --> <!-- wp:query-pagination /--> <!-- /wp:query --> <!-- wp:template-part {"slug":"footer","theme":"twentytwenty-combo"} /-->

To create the template for our single posts, save a copy of index.html as single.html.

Inside single.html, delete the query block and the query pagination.

Add a white background color the group block that holds the post title and the meta, and make it full width:

<!-- wp:group {"align":"full","style":{"color":{"background":"#ffffff"}}} --> <div class="wp-block-group alignfull" style="background-color:#ffffff">

Between the separator and the footer template we add our comments area. We are not adding the post navigation, because the block does not exist yet.

<!-- wp:post-comments /-->

The full code of our single.html file is:

<!-- wp:template-part {"slug":"header","theme":"twentytwenty-combo"} /--> <!-- wp:group {"align":"full","style":{"color":{"background":"#ffffff"}}} --> <div class="wp-block-group alignfull" style="background-color:#ffffff"> <div class="wp-block-group__inner-container"> <!-- wp:post-title /--> <!-- wp:columns --> <div class="wp-block-columns"> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:post-author {"byline":"By"} /--> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:post-date /--> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:post-comments-count /--> </div> <!-- /wp:column --> </div> <!-- /wp:columns --> </div> </div> <!-- /wp:group --> <!-- wp:post-content /--> <!-- wp:group --> <div class="wp-block-group"> <div class="wp-block-group__inner-container"> <!-- wp:post-tags /--> </div> </div> <!-- /wp:group --> <!-- wp:separator {"className":"is-style-wide"} --> <hr class="wp-block-separator is-style-wide" /> <!-- /wp:separator --> <!-- wp:post-comments /--> <!-- wp:template-part {"slug":"footer","theme":"twentytwenty-combo"} /-->

Open header.html in your code editor.

We want to have the site title to the left, and a menu and search to the right, over a white background.

For this, we add a full width columns block with 3 columns and a white background:

<!-- wp:columns {"align":"full","style":{"color":{"background":"#ffffff"}}} --> <div class="wp-block-columns alignfull has-background" style="background-color:#ffffff"> <!-- wp:column --> <div class="wp-block-column"> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> </div> <!-- /wp:column --> </div> <!-- /wp:columns -->

Inside the columns we add the block comment for the site title:

<!-- wp:site-title /-->

A horisontal menu:

<!-- wp:navigation {"orientation":"horizontal"} --> <!-- wp:navigation-link {"label":"Sample Page","type":"page","id":2,"url":"sample link here"} /--> <!-- wp:navigation-link {"label":"Lorem Ipsum","type":"page","id":146,"url":"add your sample link here"} /--> <!-- /wp:navigation -->

And last, the search:

<!-- wp:search /-->

It is not the most beautiful creation, but without having added any extra CSS or alignment tweaks, it has some resemblance:

The header and first post of our full site editing theme.

The original theme:

The header and the first post of the standard Twenty Twenty theme.

You are getting a hang of this now aren’t you? But we have one final part to create before you can go and take a break; the footer.

All of the footer content is wrapped inside a full width group block with a white background (you can copy this from single.html).

<!-- wp:group {"align":"full","style":{"color":{"background":"#ffffff"}}} --> <div class="wp-block-group alignfull" style="background-color:#ffffff"> </div> </div> <!-- /wp:group -->

Inside, we will have a columns block with two columns to hold our widgets:

<!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column --> <div class="wp-block-column"></div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"></div> <!-- /wp:column --></div> <!-- /wp:columns -->

Try adding some widgets inside these columns. These should be pretty self explanatory:

<!-- wp:latest-comments /--> <!-- wp:latest-posts /--> <!-- wp:categories /-->

Below this widget area, Twenty Twenty displays a wide separator:

<!-- wp:separator {"className":"is-style-wide"} --> <hr class="wp-block-separator is-style-wide"/> <!-- /wp:separator -->

And we wrap it up with a second two column block to hold our copyright and the go to top link:

<!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column --> <div class="wp-block-column"> <!-- wp:paragraph --> <p>© 2020<a href="https://example.com/">Theme Preview</a></p> <!-- /wp:paragraph --> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:paragraph --> <a href="#">To the Top</a></p> <!-- /wp:paragraph --> </div> <!-- /wp:column --></div> <!-- /wp:columns -->

The full code for the footer is:

<!-- wp:group {"align":"full","style":{"color":{"background":"#ffffff"}}} --> <div class="wp-block-group alignfull" style="background-color:#ffffff"> <div class="wp-block-group__inner-container"> <!-- wp:columns --> <div class="wp-block-columns"> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:latest-posts /--> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:latest-comments /--> <!-- wp:categories /--> </div> <!-- /wp:column --> </div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-wide"} --> <hr class="wp-block-separator is-style-wide" /> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:paragraph --> <p>© 2020 <a href="https://example.com/">Theme Preview</a></p> <!-- /wp:paragraph --> </div> <!-- /wp:column --> <!-- wp:column --> <div class="wp-block-column"> <!-- wp:paragraph --> <p><a href="#">To the Top</a></p> <!-- /wp:paragraph --> </div> <!-- /wp:column --> </div> <!-- /wp:columns --> </div> </div> <!-- /wp:group -->

The complete theme can be found in the course material.