@wordpress/block-library 9.30.1-next.836ecdcae.0 → 9.30.1-next.a730c9c8c.0

package/src/table-of-contents/save.js

@@ -9,17 +9,21 @@ import { useBlockProps } from '@wordpress/block-editor';
 import TableOfContentsList from './list';
 import { linearToNestedHeadingList } from './utils';
 
-export default function save( { attributes: { headings = [] } } ) {
+export default function save( {
+	attributes: { headings = [], ordered = true },
+} ) {
 	if ( headings.length === 0 ) {
 		return null;
 	}
+	const ListTag = ordered ? 'ol' : 'ul';
 	return (
 		<nav { ...useBlockProps.save() }>
-			<ol>
+			<ListTag>
 				<TableOfContentsList
 					nestedHeadingList={ linearToNestedHeadingList( headings ) }
+					ordered={ ordered }
 				/>
-			</ol>
+			</ListTag>
 		</nav>
 	);
 }

package/src/term-template/block.json

@@ -0,0 +1,73 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/term-template",
+	"title": "Term Template",
+	"category": "theme",
+	"ancestor": [ "core/terms-query" ],
+	"description": "Contains the block elements used to render a taxonomy term, like the name, description, and more.",
+	"textdomain": "default",
+	"usesContext": [ "termQuery" ],
+	"attributes": {
+		"namespace": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"reusable": false,
+		"html": false,
+		"align": [ "wide", "full" ],
+		"layout": {
+			"allowSwitching": true,
+			"allowEditing": true,
+			"default": {
+				"type": "flex"
+			}
+		},
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"blockGap": {
+				"__experimentalDefault": "1.25em"
+			},
+			"__experimentalDefaultControls": {
+				"blockGap": true,
+				"padding": false,
+				"margin": false
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		}
+	},
+	"style": "wp-block-term-template",
+	"variations": "file:./variations.js"
+}

package/src/term-template/edit.js

@@ -0,0 +1,391 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { memo, useMemo, useState } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { layout } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import {
+	BlockContextProvider,
+	__experimentalUseBlockPreview as useBlockPreview,
+	__experimentalBlockVariationPicker as BlockVariationPicker,
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useEntityRecords } from '@wordpress/core-data';
+import {
+	createBlocksFromInnerBlocksTemplate,
+	store as blocksStore,
+} from '@wordpress/blocks';
+
+const TEMPLATE = [
+	[
+		'core/group',
+		{
+			layout: {
+				type: 'flex',
+				orientation: 'horizontal',
+			},
+			style: {
+				spacing: {
+					blockGap: '0.5rem',
+				},
+			},
+			metadata: {
+				name: __( 'Term Name with Count' ),
+			},
+		},
+		[
+			[
+				'core/paragraph',
+				{
+					metadata: {
+						name: __( 'Term Name' ),
+						bindings: {
+							content: {
+								source: 'core/term-data',
+								args: {
+									key: 'name',
+								},
+							},
+						},
+					},
+				},
+			],
+			[
+				'core/paragraph',
+				{
+					placeholder: __( '(count)' ),
+					metadata: {
+						name: __( 'Term Count' ),
+						bindings: {
+							content: {
+								source: 'core/term-data',
+								args: {
+									key: 'count',
+								},
+							},
+						},
+					},
+				},
+			],
+		],
+	],
+];
+
+function TermTemplateInnerBlocks( { classList } ) {
+	const innerBlocksProps = useInnerBlocksProps(
+		{ className: clsx( 'wp-block-term', classList ) },
+		{ template: TEMPLATE, __unstableDisableLayoutClassNames: true }
+	);
+	return <li { ...innerBlocksProps } />;
+}
+
+function TermTemplateBlockPreview( {
+	blocks,
+	blockContextId,
+	classList,
+	isHidden,
+	setActiveBlockContextId,
+} ) {
+	const blockPreviewProps = useBlockPreview( {
+		blocks,
+		props: {
+			className: clsx( 'wp-block-term', classList ),
+		},
+	} );
+
+	const handleOnClick = () => {
+		setActiveBlockContextId( blockContextId );
+	};
+
+	const style = {
+		display: isHidden ? 'none' : undefined,
+	};
+
+	return (
+		<li
+			{ ...blockPreviewProps }
+			tabIndex={ 0 }
+			// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+			role="button"
+			onClick={ handleOnClick }
+			onKeyPress={ handleOnClick }
+			style={ style }
+		/>
+	);
+}
+
+// Prevent re-rendering of the block preview when the terms data changes.
+const MemoizedTermTemplateBlockPreview = memo( TermTemplateBlockPreview );
+
+/**
+ * Builds a hierarchical tree structure from flat terms array.
+ *
+ * @param {Array} terms Array of term objects.
+ * @return {Array} Tree structure with parent/child relationships.
+ */
+function buildTermsTree( terms ) {
+	const termsById = {};
+	const rootTerms = [];
+
+	terms.forEach( ( term ) => {
+		termsById[ term.id ] = {
+			term,
+			children: [],
+		};
+	} );
+
+	terms.forEach( ( term ) => {
+		if ( term.parent && termsById[ term.parent ] ) {
+			termsById[ term.parent ].children.push( termsById[ term.id ] );
+		} else {
+			rootTerms.push( termsById[ term.id ] );
+		}
+	} );
+
+	return rootTerms;
+}
+
+/**
+ * Renders a single term node and its children recursively.
+ *
+ * @param {Object}   termNode   Term node with term object and children.
+ * @param {Function} renderTerm Function to render individual terms.
+ * @return {JSX.Element} Rendered term node with children.
+ */
+function renderTermNode( termNode, renderTerm ) {
+	return (
+		<li className="wp-block-term">
+			{ renderTerm( termNode.term ) }
+			{ termNode.children.length > 0 && (
+				<ul>
+					{ termNode.children.map( ( child ) =>
+						renderTermNode( child, renderTerm )
+					) }
+				</ul>
+			) }
+		</li>
+	);
+}
+
+/**
+ * Checks if a term is the currently active term.
+ *
+ * @param {number} termId               The term ID to check.
+ * @param {number} activeBlockContextId The currently active block context ID.
+ * @param {Array}  blockContexts        Array of block contexts.
+ * @return {boolean} True if the term is active, false otherwise.
+ */
+function isActiveTerm( termId, activeBlockContextId, blockContexts ) {
+	return termId === ( activeBlockContextId || blockContexts[ 0 ]?.termId );
+}
+
+export default function TermTemplateEdit( {
+	clientId,
+	setAttributes,
+	context: {
+		termQuery: {
+			taxonomy,
+			order,
+			orderBy,
+			hideEmpty,
+			hierarchical,
+			parent,
+			perPage = 10,
+		} = {},
+	},
+	__unstableLayoutClassNames,
+} ) {
+	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+
+	const queryArgs = {
+		order,
+		orderby: orderBy,
+		hide_empty: hideEmpty,
+		// To preview the data the closest to the frontend, we fetch the largest number of terms
+		// and limit them during rendering. This is because WP_Term_Query fetches data in hierarchical manner,
+		// while in editor we build the hierarchy manually. It also allows us to avoid re-fetching data when max terms changes.
+		per_page: 100,
+	};
+
+	const { records: terms, isResolving } = useEntityRecords(
+		'taxonomy',
+		taxonomy,
+		queryArgs
+	);
+
+	// Filter to show only top-level terms if "Show only top-level terms" is enabled.
+	const filteredTerms = useMemo( () => {
+		if ( ! terms || parent !== 0 ) {
+			return terms;
+		}
+		return terms.filter( ( term ) => ! term.parent );
+	}, [ terms, parent ] );
+
+	const { blocks, variations, defaultVariation } = useSelect(
+		( select ) => {
+			const { getBlocks } = select( blockEditorStore );
+			const { getBlockVariations, getDefaultBlockVariation } =
+				select( blocksStore );
+
+			return {
+				blocks: getBlocks( clientId ),
+				variations: getBlockVariations( 'core/term-template', 'block' ),
+				defaultVariation: getDefaultBlockVariation(
+					'core/term-template',
+					'block'
+				),
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockProps = useBlockProps( {
+		className: __unstableLayoutClassNames,
+	} );
+
+	const blockContexts = useMemo(
+		() =>
+			filteredTerms?.map( ( term ) => ( {
+				taxonomy,
+				termId: term.id,
+				classList: `term-${ term.id }`,
+				termData: term,
+			} ) ),
+		[ filteredTerms, taxonomy ]
+	);
+
+	// Show variation picker if no blocks exist.
+	if ( ! blocks?.length ) {
+		return (
+			<div { ...blockProps }>
+				<BlockVariationPicker
+					icon={ layout }
+					label={ __( 'Term Template' ) }
+					variations={ variations }
+					instructions={ __(
+						'Choose a layout for displaying terms:'
+					) }
+					onSelect={ ( nextVariation = defaultVariation ) => {
+						if ( nextVariation.attributes ) {
+							setAttributes( nextVariation.attributes );
+						}
+						if ( nextVariation.innerBlocks ) {
+							replaceInnerBlocks(
+								clientId,
+								createBlocksFromInnerBlocksTemplate(
+									nextVariation.innerBlocks
+								),
+								true
+							);
+						}
+					} }
+					allowSkip
+				/>
+			</div>
+		);
+	}
+
+	if ( isResolving ) {
+		return (
+			<ul { ...blockProps }>
+				<li className="wp-block-term term-loading">
+					<div className="term-loading-placeholder" />
+				</li>
+				<li className="wp-block-term term-loading">
+					<div className="term-loading-placeholder" />
+				</li>
+				<li className="wp-block-term term-loading">
+					<div className="term-loading-placeholder" />
+				</li>
+			</ul>
+		);
+	}
+
+	if ( ! filteredTerms?.length ) {
+		return <p { ...blockProps }> { __( 'No terms found.' ) }</p>;
+	}
+
+	const renderTerm = ( term ) => {
+		const blockContext = {
+			taxonomy,
+			termId: term.id,
+			classList: `term-${ term.id }`,
+			termData: term,
+		};
+
+		return (
+			<BlockContextProvider key={ term.id } value={ blockContext }>
+				{ isActiveTerm(
+					term.id,
+					activeBlockContextId,
+					blockContexts
+				) ? (
+					<TermTemplateInnerBlocks
+						classList={ blockContext.classList }
+					/>
+				) : null }
+				<MemoizedTermTemplateBlockPreview
+					blocks={ blocks }
+					blockContextId={ term.id }
+					classList={ blockContext.classList }
+					setActiveBlockContextId={ setActiveBlockContextId }
+					isHidden={ isActiveTerm(
+						term.id,
+						activeBlockContextId,
+						blockContexts
+					) }
+				/>
+			</BlockContextProvider>
+		);
+	};
+
+	return (
+		<>
+			<ul { ...blockProps }>
+				{ hierarchical
+					? buildTermsTree( filteredTerms ).map( ( termNode ) =>
+							renderTermNode( termNode, renderTerm )
+					  )
+					: blockContexts &&
+					  blockContexts
+							.slice( 0, perPage )
+							.map( ( blockContext ) => (
+								<BlockContextProvider
+									key={ blockContext.termId }
+									value={ blockContext }
+								>
+									{ blockContext.termId ===
+									( activeBlockContextId ||
+										blockContexts[ 0 ]?.termId ) ? (
+										<TermTemplateInnerBlocks
+											classList={ blockContext.classList }
+										/>
+									) : null }
+									<MemoizedTermTemplateBlockPreview
+										blocks={ blocks }
+										blockContextId={ blockContext.termId }
+										classList={ blockContext.classList }
+										setActiveBlockContextId={
+											setActiveBlockContextId
+										}
+										isHidden={
+											blockContext.termId ===
+											( activeBlockContextId ||
+												blockContexts[ 0 ]?.termId )
+										}
+									/>
+								</BlockContextProvider>
+							) ) }
+			</ul>
+		</>
+	);
+}

package/src/term-template/editor.scss

@@ -0,0 +1,26 @@
+.wp-block-term-template {
+	.term-loading {
+		.term-loading-placeholder {
+			width: 100%;
+			height: 1.5em;
+			margin-bottom: 0.25em;
+			background-color: $gray-100;
+			border-radius: 2px;
+			@media not ( prefers-reduced-motion ) {
+				animation: loadingpulse 1.5s ease-in-out infinite;
+			}
+		}
+	}
+}
+
+@keyframes loadingpulse {
+	0% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.5;
+	}
+	100% {
+		opacity: 1;
+	}
+}

package/src/term-template/index.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { layout as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+import variations from './variations';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	variations,
+	edit,
+	save,
+	example: {},
+};
+
+export const init = () => initBlock( { name, metadata, settings } );