Testing Breadcrumbs And Readtime Blocks

Note: This post of understanding newly added WordPress Site Editor features including using blocks. This learning post is still in active development and updated regularly.

Justin Tadlock, recently announced that he has released a block version of his Breadcrumbs plugin. In the release post, he explains in the release post how the plugin works.

Just writes that in version 1.0, the block offers a handful of custom options in addition to the standard design tools (colors, dimensions, etc.).

  • It allows to customize the “Home” label in the crumbs.
  • The icon picker allows users change the appearance of the “Home” label with a range of Home icons and emoji options to choose from.
  • Users can choose the icon or symbol that goes between each breadcrumb in the separator tool bar.
  • The block is said to work with both the block and the classic themes.

In order to see how the new Breadcrumbs plug worked, I tested it on one of the test sites using the default Twenty Twenty-Three theme.

Screenshot showing use of breadcrumb plugin in a single page template.

The plugin works as described. In this YouTube video, Jamie Marsland demonstrates how to customize the breadcrumbs in a page.

Using Readtime block

The “Time to read” block released in Gutenberg 15.3, has not been merged into WordPress core yet. This useful feature is only accessible when using with the latest version of Gutenberg plugin. Designing nicely to use in post/page or block templates is a little tricky.

In a recent YouTube video, Jamie Mrasland (starts at 5:45) describes how he customized the time to read block in page header section (e.g., cover block).

Screenshot showing time to read block use with a row block.

Behind the scene, the above screenshot how Jamie does. To insert text before the Time to read block, it has to be wrapped in a row block with a paragraph block and the Time to read block.

That’s it!

Related resources