New block: Breadcrumbs

* Features:
	* New block: Knowledge Base Breadcrumbs.

* Modifications:
	* Enhanced breadcrumb navigation with semantic HTML5 markup and improved accessibility
	* Added Schema.org BreadcrumbList markup for better SEO
	* Added support for custom Unicode separators in breadcrumbs

includes/blocks/build/breadcrumb/block.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "knowledgebase/breadcrumb",
+  "version": "2.3.0",
+  "title": "Knowledge Base Breadcrumb",
+  "category": "design",
+  "icon": "menu",
+  "keywords": [
+    "knowledgebase",
+    "breadcrumb",
+    "kb",
+    "navigation"
+  ],
+  "description": "Display the Knowledge Base Breadcrumb navigation",
+  "supports": {
+    "html": false,
+    "align": true
+  },
+  "attributes": {
+    "className": {
+      "type": "string",
+      "default": ""
+    },
+    "separator": {
+      "type": "string",
+      "default": "»"
+    }
+  },
+  "example": {},
+  "textdomain": "knowledgebase",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css"
+}

includes/blocks/build/breadcrumb/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-server-side-render'), 'version' => '209f3d829860668efee0');

includes/blocks/build/kb-articles/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-i18n', 'wp-server-side-render'), 'version' => 'af27dffe54569e88bed6');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-core-data', 'wp-data', 'wp-i18n', 'wp-server-side-render'), 'version' => 'fdd6590102694fbba66d');

includes/blocks/class-blocks.php

@@ -9,6 +9,7 @@
 namespace WebberZone\Knowledge_Base\Blocks;
 
 use WebberZone\Knowledge_Base\Frontend\Display;
+use WebberZone\Knowledge_Base\Frontend\Breadcrumbs;
 
 // If this file is called directly, abort.
 if ( ! defined( 'WPINC' ) ) {
@@ -43,6 +44,7 @@ public function register_blocks() {
 			'kb'          => 'render_kb_block',
 			'alerts'      => 'render_alerts_block',
 			'kb-articles' => 'render_articles_block',
+			'breadcrumb'  => 'render_breadcrumb_block',
 		);
 
 		foreach ( $blocks as $block_name => $render_callback ) {
@@ -123,11 +125,10 @@ public function render_kb_block( $attributes ) {
 	 *
 	 * @param array  $attributes The block attributes.
 	 * @param string $content The block content.
-	 * @param array  $block The block object.
 	 *
 	 * @return string Returns the post content with latest posts added.
 	 */
-	public function render_alerts_block( $attributes, $content, $block ) {
+	public function render_alerts_block( $attributes, $content ) {
 		return wp_kses_post( $content );
 	}
 
@@ -177,4 +178,25 @@ public function render_articles_block( $attributes ) {
 
 		return $list_of_posts;
 	}
+
+	/**
+	 * Render the block.
+	 *
+	 * @since 2.3.0
+	 *
+	 * @param array $attributes Block attributes.
+	 *
+	 * @return string Rendered block output.
+	 */
+	public static function render_breadcrumb_block( $attributes ) {
+		$wrapper_attributes = get_block_wrapper_attributes();
+
+		$output = sprintf(
+			'<div %1$s>%2$s</div>',
+			$wrapper_attributes,
+			wzkb_get_breadcrumb( $attributes )
+		);
+
+		return $output;
+	}
 }

includes/blocks/src/breadcrumb/block.json

@@ -0,0 +1,29 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "knowledgebase/breadcrumb",
+	"version": "2.3.0",
+	"title": "Knowledge Base Breadcrumb",
+	"category": "design",
+	"icon": "menu",
+	"keywords": ["knowledgebase", "breadcrumb", "kb", "navigation"],
+	"description": "Display the Knowledge Base Breadcrumb navigation",
+	"supports": {
+		"html": false,
+		"align": true
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"separator": {
+			"type": "string",
+			"default": "»"
+		}
+	},
+	"example": {},
+	"textdomain": "knowledgebase",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css"
+}

includes/blocks/src/breadcrumb/edit.js

@@ -0,0 +1,51 @@
+import { __ } from '@wordpress/i18n';
+import ServerSideRender from '@wordpress/server-side-render';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+
+import {
+	Disabled,
+	PanelBody,
+	PanelRow,
+	TextControl,
+} from '@wordpress/components';
+
+import './editor.scss';
+
+export default function Edit({ attributes, setAttributes }) {
+	const { separator } = attributes;
+	const blockProps = useBlockProps();
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody
+					title={__('Breadcrumb Settings', 'knowledgebase')}
+					initialOpen={true}
+				>
+					<PanelRow>
+						<TextControl
+							label={__('Separator', 'knowledgebase')}
+							value={separator}
+							onChange={(value) =>
+								setAttributes({ separator: value })
+							}
+							help={__(
+								'Enter the separator character or Unicode (e.g. »)',
+								'knowledgebase'
+							)}
+						/>
+					</PanelRow>
+				</PanelBody>
+			</InspectorControls>
+
+			<div {...blockProps}>
+				<Disabled>
+					<ServerSideRender
+						block="knowledgebase/breadcrumb"
+						attributes={attributes}
+					/>
+				</Disabled>
+			</div>
+		</>
+	);
+}

includes/blocks/src/breadcrumb/editor.scss

@@ -0,0 +1,28 @@
+.wzkb_breadcrumb {
+	margin-bottom: 1em;
+}
+
+.wzkb_breadcrumb-list {
+	list-style: none;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+}
+
+.wzkb_breadcrumb-item {
+	display: flex;
+	align-items: center;
+}
+
+.wzkb_breadcrumb-item:not(:last-child)::after {
+	content: "\00BB";
+	content: attr(data-separator);
+	margin: 0 0.5em;
+	color: var(--wzkb-breadcrumb-separator-color, #666);
+}
+
+.wp-block-knowledgebase-breadcrumb {
+	margin-bottom: 1em;
+}

includes/blocks/src/breadcrumb/index.js

@@ -0,0 +1,23 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType('knowledgebase/breadcrumb', {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+});