Breadcrumb Block

A simple breadcrumb trail block that supports JSON-LD structured data

Author:	Phi Phan (profile at wordpress.org)
WordPress version required:	5.8
WordPress version tested:	6.5.3
Plugin version:	1.0.14
Added to WordPress repository:	22-10-2022
Last updated:	30-04-2024
Rating, %:	100
Rated by:	10
Plugin URI:
Total downloads:	10 419
Active installs:	1 000+
Click to start download

This is a single-block plugin for the breadcrumb trail. It’s simple, lightweight, SEO-friendly, and WooCommerce compatibility. It also includes some simple separator icons. It works everywhere: Page Editor, Site Editor, and template files.

How to customize the breadcrumb

1. How to change/remove an item?

   add_filter( 'breadcrumb_block_get_item', function ( $item_args, $context ) {
     // Eg: remove a term.
     if ( 'term' === $context['type'] && 'term-slug' === $context['object']->slug ) {
       return false;
     }
   
     // Eg: Change the title of a page.
     if ( 'page' === $context['type'] && page_id_to_change === $context['object']->ID ) {
       $item_args[0] = 'Make it shorter';
     }
   
     return $item_args;
   }, 10, 2 );
   
   $item_args is a 3-item array: `[$item_label, $item_link, $item_attrs]`
   $context is an associative array: `['type' => 'item type', 'object' => 'item object']`. `type` can be one of the following values: `front_page`, `home`, `shop`, `page`, `post`, `single`, `term`, `taxonomy`, `post_type_archive`, `search`, `404`, `paged`, `author`, `date_year`, `date_month`, `date_day`, `attachment`.
   

2. How to change the markup of the block?

   add_filter( 'breadcrumb_block_get_breadcrumb_trail', function ( $markup, $args, $breadcrumbs_instance ) {
     return $markup;
   }, 10, 3 );
   

3. How to add or remove the items from the breadcrumb trail?

   add_filter( 'breadcrumb_block_get_items', function ( $items, $breadcrumbs_instance ) {
     return $items;
   }, 10, 2 );
   

4. How to use a custom separator for the breadcrumb trail?

   add_filter( 'breadcrumb_block_get_args', function ( $args ) {
     // For example, change separator.
     $args['separator'] = '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="1em" height="1em" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M3.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L9.293 8 3.646 2.354a.5.5 0 0 1 0-.708z"/><path fill-rule="evenodd" d="M7.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L13.293 8 7.646 2.354a.5.5 0 0 1 0-.708z"/></svg>';
     return $args;
   } );
   

   The custom separator should be an inline SVG. To make sure it displays properly, it should have three attributes: width, height, and fill. The values of these attributes should be as follows: fill="currentColor" width="1em" height="1em".
   Using this hook, you can customize other attributes such as container, before, after, list_tag, item_tag, item_before, item_after, separator.

If this plugin is useful for you, please do a quick review and rate it on WordPress.org to help us spread the word. I would very much appreciate it.

Please check out my other plugins if you’re interested:

• Content Blocks Builder – A tool to create blocks, patterns or variations easily for your site directly on the Block Editor.
• Meta Field Block – A block to display a meta field or an ACF field as a block. It can also be used in the Query Loop block.
• Block Enhancements – A plugin to add more useful features to blocks like icons, box-shadow, transform, hover style…
• Icon Separator – A tiny block just like the core/separator block but with the ability to add an icon to it.
• SVG Block – A block to insert inline SVG images easily and safely. It also bundles with more than 3000 icons and some common non-rectangular dividers.
• Counting Number Block – A block to display a number that has the number-counting effect.
• Better Youtube Embed Block – Embed Youtube videos without slowing down your site.

The plugin is developed using @wordpress/create-block.