bobbingwide/sb-breadcrumbs-block

Show breadcrumbs to the current content as links

SB Breadcrumbs block

• Contributors: bobbingwide
• Tags: block, breadcrumbs, link, Yoast, Genesis
• Requires at least: 5.4.2
• Tested up to: 6.4.1
• Stable tag: 0.6.1
• Requires PHP: 7.2.0
• License: GPL-2.0-or-later
• License URI: https://www.gnu.org/licenses/gpl-2.0.html

Show breadcrumb links to the current content.

Description

Use the Breadcrumbs block ( sb/breadcrumbs-block ) to display links to the current content in a breadcrumb trail.

Installation

1. Upload the plugin files to the /wp-content/plugins/sb-breadcrumbs-block directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress

Frequently Asked Questions

Does it use Yoast SEO breadcrumbs?

Yes. If they're Enabled. But only on the front end.

Does it use Genesis breadcrumbs?

Yes. If available and breadcrumbs have not already been created using Yoast breadcrumbs. And also, only on the front end.

Why doesn't Gutenberg provide a breadcrumbs block?

See the feature request WordPress/gutenberg#21943

Screenshots

1. breadcrumbs block

Upgrade Notice

0.6.1

Update for support for PHP 8.1 and PHP 8.2

0.6.0

Upgrade for an internationalized and localized version.

0.5.3

May fix a problem with WSOD when Jetpack also active?

0.5.2

Update for support for Genesis breadcrumbs.

0.5.1

Update for improved documentation.

0.5.0

Now internationalized. Supported languages are US English, UK English ( 'en_GB' locale ) and bbboing language ( 'bb_BB' locale )

0.4.0

Use the breadcrumbs block (sb/breadcrumbs-block) from the SB breadcrumbs block plugin when you need to show links to all the current posts' ancestors.

Changelog

0.6.1

• Changed: Support PHP 8.1 and PHP 8.2 #8
• Tested: With WordPress 6.4.1 and WordPress Multisite
• Tested: With Gutenberg 17.1.4
• Tested: With PHP 8.1 and PHP 8.2
• Tested: With Yoast-SEO 21.6

0.6.0

• Changed: Block is registered using block.json apiVersion:2 #7
• Changed: Internationalized and localized. #7
• Tested: With WordPress 5.8.1
• Tested: With Gutenberg 11.5.1
• Tested: With PHP 8.0
• Tested: With Yoast-SEO 17.2

0.5.3

• Changed: Updated build.

0.5.2

• Changed: Add support for Genesis Breadcrumbs - front end only, #3

0.5.1

• Changed: Improved internationalization strings, #1
• Tested: With WordPress 5.5-RC1

0.5.0

• Added: Uses Yoast SEO breadcrumbs if enabled, #2
• Changed: Internationalised. Localised into UK English and bbboing language, #1
• Tested: With WordPress 5.4.2 and WordPress Multi Site
• Tested: With WordPress 5.5-beta3
• Tested: With PHP 7.3 and PHP 7.4

0.4.0

• Changed: Copied and cobbled from SB Parent block plugin.

Build process

Only necessary if you want to build the block yourself.

• To build the block during development.

npm start

Press Ctrl-C to to stop process.

• To build the block for runtime.

npm run build

The routine should terminate when the build is complete.

• To build the main file for translation

npm run makepot

• To perform automatic localization to UK English ( en_GB ) and bbboing ( bb_BB ) locales.

npm run l10n

• To create the block editor language files after translation

npm run makejson

Pre-requisite:

You need to have npm - Node Package Manager - installed.

For some basic instructions see the oik-blocks summary of blocks README

Most people run the npm command from the command line.

sb-breadcrumbs-block's Issues

Support PHP 8.1, PHP 8.2 and PHP 8.3

Update code to run without problems in PHP 8.1, PHP 8.2, and PHP 8.3 with WordPress 6.4.1

See bobbingwide/bobbingwide#103

Improve Breadcrumbs by using Genesis breadcrumbs logic if available

For themes which use the Genesis theme framework we can try to use the genesis breadcrumbs logic.

Improve Breadcrumbs block using WordPress SEO logic

In the prototyped version of the block ( #1 ) I implemented a call to yoast_breadcrumb() if it was available.

When the Breadcrumbs setting was Disabled then the function returned null, so the code then defaulted to my own logic.

When the Breadcrumbs setting was Enabled then the breadcrumb was displayed.

But, the results in the editor didn't match the results in the browser.
In the editor I just get "Home"
In the front-end the trail includes archive links for CPTs.

e.g. when viewing
https://s.b/oikcom/block/breadcrumbs-block-sb-breadcrumbs-block/

the trail is:

'Ome » Blocks » Breadcrumbs block – sb/breadcrumbs-block

where:

• 'Ome is the string I've chosen for for Home
• » is the default separator
• and the values to the left of the separators are linked to the substring of the permalink.

Requirement

To get the same output in the editor as in the front-end.

Proposed solution

Don't know yet, but see if there's anything happening in... Yoast/wordpress-seo#14204

Register block using `apiVersion:2`, internationalize, translate and localize

The sb/breadcrumbs-block block is registered using v1 of the registerBlockType API.
It needs to be:

• registered using apiVersion: 2
• internationalized,
• translated
• and localized.

Requirements

• Register the block using block.json
• Ensure the block can be selected
• Add some color and typography settings where applicable
• Add text align capability where applicable
• Internationalized and localized

Proposed solution

• Update package.json
• Change block.json for each block
• Change index.js to register the block from the server registration
• Change the server to register the block from block.json
• Wrap the output from bw_squeeze using get_block_wrapper_attributes()
• Update node_modules and rebuild
• (re) Internationalize and (re) localize
• remove webpack.config.js - if it's no longer necessary
• Consider renaming the block to have a more unique prefix.

Process for updating node_modules

1. Remove the existing node_modules folder
2. npm install
3. npm install @wordpress/scripts --save-dev

See https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/

Prototype a Breadcrumbs block supporting internationalization

• The idea of having a breadcrumbs block is not new.
• There are already many plugins and themes that deliver some sort of breadcrumb functionality.
• I decided I wanted to extend the logic in the sb-parent-block plugin to support the breadcrumbs trail.
• I also wanted to find out how to properly implement internationalization and localization of plugins that implement blocks.

The purpose of this issue is fourfold:

1. To develop basic block called Breadcrumbs ( sb/breadcrumbs-block )
2. That can be translated into other languages.
3. Demonstrate it using the UK English language ( en_GB locale) in my local development environment
4. Demonstrate it using the bbboing language ( bb_BB locale) in my local development environment

Miscellaneous Notes

• I commented on WP Tavern's post about the new block directory guidelines ( https://wptavern.com/revised-block-directory-guidelines-proposal-updates-wording-but-changes-little-else ) wondering whether or not I could get some single block plugins that use server side rendering accepted into the block directory.

• I searched for a Breadcrumbs block and found https://github.com/phpbits/breadcrumbs-block/ but thought it used more code than necessary.

• I also found WordPress/gutenberg#21274, but soon realised this is for Block breadcrumbs in Full Site Editing, and not a core block called breadcrumbs.

Improve the Breadcrumbs block to support archive / category / taxonomy pages

During development of the Fizzie theme's Category page I needed to implement the breadcrumbs block on a number of templates.
It worked fine on pages, but didn't work properly on the category template.
In the category template the breadcrumb was

Home / Trying to build Fizzie

where Trying to build Fizzie was the first post displayed in the list, not the taxonomy term that had been selected.

Requirement

• Implement support for displaying breadcrumbs as done in Genesis and WordPress SEO
• Support hierarchical terms

Category slug	Genesis	WordPress SEO
/category/blocks	Home / Archives for Blocks	Home >> Blocks
/category/blocks/single	Home / Archives for Blocks	Single blocks

Proposed solution

• Look at the Genesis code first

Improve Breadcrumbs block by adding block settings

The default logic in sb_breadcrumbs_dynamic_block_internal uses hardcoded values for
the separator between breadcrumbs and the title for "Home".

Requirement

• Add block settings

Setting	Label	Type	Default
home	Anchor text for the Homepage	string	Home
separator	Separator	string	' / '

Enable peaceful coexistence with other single block plugins when built with 'npm run build'

A few days ago I discovered a problem with multiple single block plugins built using the wp-scripts package's npm run build command. Basically, if each plugin's block doesn't have a unique name in the generated build file(s), then things can go terribly wrong.

I raised an issue against Gutenberg ( @wordpress/scripts: React.createElement type is invalid when two single block plugins are built using npm run build - issue number 24321 ).

The response was to use my own webpack.config.js file to supply the unique name.
IMO the problem is _a limitation with the wp-scripts packag_e.
But there's a fairly simple workaround.
... Add a webpack.config.js file and rebuild.

For sb-breadcrumbs-block plugin the file is:

const config = require( '@wordpress/scripts/config/webpack.config' );

/**
 * Provide a unique name for the global scope (which is used to lazy-load chunks),
 * otherwise it throws a JS error when loading blocks compiled with `npm run build`.
 *
 * @see https://webpack.js.org/configuration/output/#outputjsonpfunction
 * @see https://github.com/WordPress/gutenberg/issues/24321
 */
// ------------------------------------------------------
config.output.jsonpFunction = 'sb-breadcrumbs-block';
// ------------------------------------------------------

module.exports = config;