New block: Knowledge Base Sections.

includes/blocks/build/sections/block.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "knowledgebase/sections",
+  "version": "2.3.0",
+  "title": "Knowledge Base Sections",
+  "category": "design",
+  "icon": "book",
+  "keywords": [
+    "knowledgbase",
+    "sections",
+    "kb"
+  ],
+  "description": "Display the list of sections when browsing a knowledge base page",
+  "supports": {
+    "html": false
+  },
+  "attributes": {
+    "className": {
+      "type": "string",
+      "default": ""
+    },
+    "title": {
+      "type": "string",
+      "default": ""
+    },
+    "termID": {
+      "type": "string",
+      "default": ""
+    },
+    "depth": {
+      "type": "string",
+      "default": ""
+    },
+    "beforeLiItem": {
+      "type": "string",
+      "default": ""
+    },
+    "afterLiItem": {
+      "type": "string",
+      "default": ""
+    }
+  },
+  "example": {},
+  "textdomain": "knowledgebase",
+  "editorScript": "file:./index.js",
+  "editorStyle": "file:./index.css"
+}

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

@@ -0,0 +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' => '8dcdb4c49c5937146313');

includes/blocks/class-blocks.php

@@ -45,6 +45,7 @@ public function register_blocks() {
 			'alerts'     => 'render_alerts_block',
 			'articles'   => 'render_articles_block',
 			'breadcrumb' => 'render_breadcrumb_block',
+			'sections'   => 'render_sections_block',
 		);
 
 		foreach ( $blocks as $block_name => $render_callback ) {
@@ -199,4 +200,53 @@ public static function render_breadcrumb_block( $attributes ) {
 
 		return $output;
 	}
+
+	/**
+	 * Renders the `knowledgebase/sections` block on server.
+	 *
+	 * @since 2.3.0
+	 *
+	 * @param array $attributes The block attributes.
+	 *
+	 * @return string Returns the sections list.
+	 */
+	public function render_sections_block( $attributes ) {
+		$mappings = array(
+			'term_id'        => 'termID',
+			'before_li_item' => 'beforeLiItem',
+			'after_li_item'  => 'afterLiItem',
+		);
+
+		$attributes = $this->map_attributes( $attributes, $mappings );
+
+		$arguments = array(
+			'is_block'       => 1,
+			'depth'          => ( ! empty( $attributes['depth'] ) ) ? (int) $attributes['depth'] : 0,
+			'before_li_item' => ( ! empty( $attributes['before_li_item'] ) ) ? $attributes['before_li_item'] : '',
+			'after_li_item'  => ( ! empty( $attributes['after_li_item'] ) ) ? $attributes['after_li_item'] : '',
+		);
+
+		$term_id = ! empty( $attributes['term_id'] ) ? (int) $attributes['term_id'] : 0;
+
+		/**
+		 * Filters arguments passed to wzkb_categories_list for the block.
+		 *
+		 * @since 2.3.0
+		 *
+		 * @param array $arguments  Knowledge Base block options array.
+		 * @param array $attributes Block attributes array.
+		 */
+		$arguments = apply_filters( 'wzkb_sections_block_options', $arguments, $attributes );
+
+		$wrapper_attributes = get_block_wrapper_attributes();
+
+		$output = sprintf(
+			'<div %1$s>%2$s%3$s</div>',
+			$wrapper_attributes,
+			! empty( $attributes['title'] ) ? '<h2>' . esc_html( $attributes['title'] ) . '</h2>' : '',
+			wzkb_categories_list( $term_id, 0, $arguments )
+		);
+
+		return $output;
+	}
 }

includes/blocks/src/sections/block.json

@@ -0,0 +1,44 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "knowledgebase/sections",
+	"version": "2.3.0",
+	"title": "Knowledge Base Sections",
+	"category": "design",
+	"icon": "book",
+	"keywords": ["knowledgbase", "sections", "kb"],
+	"description": "Display the list of sections when browsing a knowledge base page",
+	"supports": {
+		"html": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"title": {
+			"type": "string",
+			"default": ""
+		},
+		"termID": {
+			"type": "string",
+			"default": ""
+		},
+		"depth": {
+			"type": "string",
+			"default": ""
+		},
+		"beforeLiItem": {
+			"type": "string",
+			"default": ""
+		},
+		"afterLiItem": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"example": {},
+	"textdomain": "knowledgebase",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css"
+}

includes/blocks/src/sections/edit.js

@@ -0,0 +1,146 @@
+import { __ } from '@wordpress/i18n';
+import ServerSideRender from '@wordpress/server-side-render';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+import {
+	Disabled,
+	ComboboxControl,
+	PanelBody,
+	PanelRow,
+	Spinner,
+	TextControl,
+	Notice,
+} from '@wordpress/components';
+
+import './editor.scss';
+
+export default function Edit({ attributes, setAttributes }) {
+	const { termID, depth, beforeLiItem, afterLiItem } = attributes;
+
+	const blockProps = useBlockProps();
+
+	const { terms, hasResolved, error } = useSelect((select) => {
+		const query = { per_page: -1 };
+		const selectorArgs = ['taxonomy', 'wzkb_category', query];
+
+		try {
+			return {
+				terms: select(coreStore).getEntityRecords(...selectorArgs),
+				hasResolved: select(coreStore).hasFinishedResolution(
+					'getEntityRecords',
+					selectorArgs
+				),
+				error: null,
+			};
+		} catch (fetchError) {
+			return {
+				terms: [],
+				hasResolved: true,
+				error: fetchError,
+			};
+		}
+	}, []);
+
+	const termOptions =
+		terms?.map((term) => ({
+			label: `${term.name} (#${term.id})`,
+			value: term.id.toString(),
+		})) || [];
+
+	return (
+		<>
+			<InspectorControls>
+				{error && (
+					<Notice status="error" isDismissible={false}>
+						{__(
+							'Error loading categories. Please try again.',
+							'knowledgebase'
+						)}
+					</Notice>
+				)}
+
+				<PanelBody
+					title={__(
+						'Knowledge Base Sections Settings',
+						'knowledgebase'
+					)}
+					initialOpen={true}
+				>
+					<PanelRow>
+						{!hasResolved ? (
+							<Spinner />
+						) : (
+							<ComboboxControl
+								label={__(
+									'Select Knowledge Base Section',
+									'knowledgebase'
+								)}
+								value={termID}
+								onChange={(value) =>
+									setAttributes({ termID: value })
+								}
+								options={termOptions}
+								help={__(
+									'Search and select a knowledge base section',
+									'knowledgebase'
+								)}
+							/>
+						)}
+					</PanelRow>
+					<PanelRow>
+						<TextControl
+							label={__('Depth', 'knowledgebase')}
+							value={depth}
+							type="number"
+							min="0"
+							onChange={(value) =>
+								setAttributes({ depth: value })
+							}
+							help={__(
+								'Enter the depth of sections to display (0 for all)',
+								'knowledgebase'
+							)}
+						/>
+					</PanelRow>
+					<PanelRow>
+						<TextControl
+							label={__('Before list item', 'knowledgebase')}
+							value={beforeLiItem}
+							onChange={(value) =>
+								setAttributes({ beforeLiItem: value })
+							}
+							help={__(
+								'HTML/text to add before each list item',
+								'knowledgebase'
+							)}
+						/>
+					</PanelRow>
+					<PanelRow>
+						<TextControl
+							label={__('After list item', 'knowledgebase')}
+							value={afterLiItem}
+							onChange={(value) =>
+								setAttributes({ afterLiItem: value })
+							}
+							help={__(
+								'HTML/text to add after each list item',
+								'knowledgebase'
+							)}
+						/>
+					</PanelRow>
+				</PanelBody>
+			</InspectorControls>
+
+			<div {...blockProps}>
+				<Disabled>
+					<ServerSideRender
+						block="knowledgebase/sections"
+						attributes={attributes}
+					/>
+				</Disabled>
+			</div>
+		</>
+	);
+}

includes/blocks/src/sections/editor.scss

@@ -0,0 +1,61 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wzkb-articles-list {
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+.wzkb-articles-list li {
+	margin: 5px 0;
+	list-style-type: none !important;
+}
+
+.wzkb-articles-list li:before {
+	content: "\f123";
+	display: inline-block;
+	width: 20px;
+	height: 20px;
+	font-size: 20px;
+	line-height: 1;
+	font-family: dashicons;
+	text-decoration: inherit;
+	font-weight: 400;
+	font-style: normal;
+	vertical-align: top;
+	text-align: center;
+	-webkit-transition: color .1s ease-in 0;
+	transition: color .1s ease-in 0;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	margin-right: 10px;
+	word-wrap: break-word;
+	color: #666;
+}
+
+/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
+@media only screen and (max-width: 480px) {
+	.col {
+		margin: 1% 0;
+	}
+
+	.span_2_of_2,
+	.span_1_of_2,
+	.span_1_of_3,
+	.span_2_of_3,
+	.span_3_of_3,
+	.span_1_of_4,
+	.span_2_of_4,
+	.span_3_of_4,
+	.span_4_of_4,
+	.span_1_of_5,
+	.span_2_of_5,
+	.span_3_of_5,
+	.span_4_of_5,
+	.span_5_of_5 {
+		width: 100%;
+	}
+}

includes/blocks/src/sections/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/sections', {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+});