WordPress block parts

WordPress (WP) parts define areas of a web page, such as the header, footer and any sidebars, but not the main body of the page; that’s a job for WP templates.

A simple header might just show the name and tagline of the website:

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

A more useful header might have a navigation block:

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

A simple footer might just include the WP powered-by text:

<!-- wp:paragraph -->
<p>
  Proudly powered by <a href="https://wordpress.org/">WordPress</a>.
</p>
<!-- /wp:paragraph -->

Using markup for the title and the tagline is easier than typing out PHP commands to do this; the header for the theme I (currently) use for this site, Onepage by Iografica Themes, has the following PHP code to create the HTML code for the header tags:

[…]
<header id="masthead" class="site-header" <?php apply_filters('igthemes_header_image_filter', 'igthemes_header_image' ); ?> role="banner">
  <div class="header-content">
    <?php
    /**
     * Functions hooked in to igthemes_before_content
     */
    do_action( 'igthemes_header' ); ?>
  </div>
</header><!-- #masthead -->
[…]

There’s plenty more to the file than this: it also sets up the html tag, the head tag and starts the body tag, which is continued and concluded elsewhere.

The footer is a similar story.

It’s therefore much simpler to write a header and footer block in the new block system than it is in the classic system using PHP.

However, you’ll note that there is repetition in the footer code for a simple paragraph: there is a pair of markup paragraph tags and a pair of HTML paragraph tags. If the paragraph were to be styled, it might look like this:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">
  Proudly powered by <a href="https://wordpress.org/">WordPress</a>.
</p>
<!-- /wp:paragraph -->

I copied and pasted this from a WP tutorial, I think, on creating block themes. (I perhaps should have made a note of where I found it.) Notice that the styling is done by means of a class, which is repeated in the markup tag and the HTML tag. I’d much prefer to add a semantic class, and use CSS to style it.