@wordpress/block-library 9.30.0 → 9.30.1-next.6f42e1382.0

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 } );

package/src/term-template/index.php

@@ -0,0 +1,224 @@
+<?php
+/**
+ * Server-side rendering of the `core/term-template` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/term-template` block on the server.
+ *
+ * @since 6.9.0
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the output of the term template.
+ */
+function render_block_core_term_template( $attributes, $content, $block ) {
+	if ( ! isset( $block->context ) || ! isset( $attributes ) ) {
+		return '';
+	}
+
+	$query_block_context = $block->context;
+
+	if ( empty( $query_block_context['termQuery'] ) ) {
+		return '';
+	}
+
+	$query = $query_block_context['termQuery'];
+
+	$query_args = array(
+		'taxonomy'   => $query['taxonomy'] ?? 'category',
+		'number'     => $query['perPage'] ?? 10,
+		'order'      => $query['order'] ?? 'asc',
+		'orderby'    => $query['orderBy'] ?? 'name',
+		'hide_empty' => $query['hideEmpty'] ?? true,
+		'include'    => $query['include'] ?? array(),
+		'exclude'    => $query['exclude'] ?? array(),
+	);
+
+	// Handle parent.
+	if ( ! empty( $query['hierarchical'] ) && isset( $query['parent'] ) ) {
+		$query_args['parent'] = $query['parent'];
+	} elseif ( ! empty( $query['hierarchical'] ) ) {
+		$query_args['parent'] = 0;
+	} elseif ( isset( $query['parent'] ) ) {
+		$query_args['parent'] = $query['parent'];
+	}
+
+	$terms_query = new WP_Term_Query( $query_args );
+	$terms       = $terms_query->get_terms();
+
+	if ( ! $terms || is_wp_error( $terms ) ) {
+		return '';
+	}
+
+	// Handle hierarchical list.
+	$is_hierarchical = ! empty( $query['hierarchical'] );
+
+	if ( $is_hierarchical ) {
+		$content = render_block_core_term_template_hierarchical( $terms, $block, $query_args );
+	} else {
+		$content = render_block_core_term_template_flat( $terms, $block );
+	}
+
+	$classnames = 'wp-block-term-template';
+
+	if ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) {
+		$classnames .= ' has-link-color';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => trim( $classnames ) ) );
+
+	// Default list layout.
+	return sprintf(
+		'<ul %s>%s</ul>',
+		$wrapper_attributes,
+		$content
+	);
+}
+
+/**
+ * Renders terms in a flat list structure.
+ *
+ * @since 6.9.0
+ *
+ * @param array    $terms Array of WP_Term objects.
+ * @param WP_Block $block Block instance.
+ *
+ * @return string HTML content for flat terms list.
+ */
+function render_block_core_term_template_flat( $terms, $block ) {
+	$content = '';
+	foreach ( $terms as $term ) {
+		$content .= render_block_core_term_template_single( $term, $block );
+	}
+	return $content;
+}
+
+/**
+ * Renders terms in a hierarchical structure.
+ *
+ * @since 6.9.0
+ *
+ * @param array    $terms Array of WP_Term objects.
+ * @param WP_Block $block Block instance.
+ * @param array    $base_query_args Base query arguments.
+ *
+ * @return string HTML content for hierarchical terms list.
+ */
+function render_block_core_term_template_hierarchical( $terms, $block, $base_query_args ) {
+	$content = '';
+
+	foreach ( $terms as $term ) {
+		$term_content     = render_block_core_term_template_single( $term, $block );
+		$children_content = render_block_core_term_template_get_children( $term->term_id, $block, $base_query_args );
+
+		if ( ! empty( $children_content ) ) {
+			$term_content = str_replace( '</li>', '<ul>' . $children_content . '</ul></li>', $term_content );
+		}
+
+		$content .= $term_content;
+	}
+
+	return $content;
+}
+
+/**
+ * Gets and renders children of a specific term.
+ *
+ * @since 6.9.0
+ *
+ * @param int      $parent_term_id Parent term ID.
+ * @param WP_Block $block          Block instance.
+ * @param array    $base_query_args Base query arguments.
+ *
+ * @return string HTML content for children terms.
+ */
+function render_block_core_term_template_get_children( $parent_term_id, $block, $base_query_args ) {
+	$child_query_args           = $base_query_args;
+	$child_query_args['parent'] = $parent_term_id;
+
+	$child_terms_query = new WP_Term_Query( $child_query_args );
+	$child_terms       = $child_terms_query->get_terms();
+
+	if ( ! $child_terms || is_wp_error( $child_terms ) ) {
+		return '';
+	}
+
+	$content = '';
+
+	foreach ( $child_terms as $child_term ) {
+		$term_content     = render_block_core_term_template_single( $child_term, $block );
+		$children_content = render_block_core_term_template_get_children( $child_term->term_id, $block, $base_query_args );
+
+		if ( ! empty( $children_content ) ) {
+			$term_content = str_replace( '</li>', '<ul>' . $children_content . '</ul></li>', $term_content );
+		}
+
+		$content .= $term_content;
+	}
+
+	return $content;
+}
+
+/**
+ * Renders a single term with its inner blocks.
+ *
+ * @since 6.9.0
+ *
+ * @param WP_Term  $term  Term object.
+ * @param WP_Block $block Block instance.
+ *
+ * @return string HTML content for a single term.
+ */
+function render_block_core_term_template_single( $term, $block ) {
+	$inner_blocks  = $block->inner_blocks;
+	$block_content = '';
+
+	if ( ! empty( $inner_blocks ) ) {
+		$term_id  = $term->term_id;
+		$taxonomy = $term->taxonomy;
+
+		$filter_block_context = static function ( $context ) use ( $term_id, $taxonomy ) {
+			$context['termId']   = $term_id;
+			$context['taxonomy'] = $taxonomy;
+			return $context;
+		};
+
+		add_filter( 'render_block_context', $filter_block_context, 1 );
+
+		foreach ( $inner_blocks as $inner_block ) {
+			if ( method_exists( $inner_block, 'refresh_context_dependents' ) ) {
+				// WP_Block::refresh_context_dependents() was introduced in WordPress 6.8.
+				$inner_block->refresh_context_dependents();
+				$block_content .= $inner_block->render( array( 'dynamic' => true ) );
+			} else {
+				$block_content = ( new WP_Block( $inner_block->parsed_block ) )->render( array( 'dynamic' => false ) );
+			}
+		}
+		remove_filter( 'render_block_context', $filter_block_context, 1 );
+	}
+
+	$term_classes = implode( ' ', array( 'wp-block-term', 'term-' . $term->term_id ) );
+
+	// Default list layout
+	return '<li class="' . esc_attr( $term_classes ) . '">' . $block_content . '</li>';
+}
+
+/**
+ * Registers the `core/term-template` block on the server.
+ *
+ * @since 6.9.0
+ */
+function register_block_core_term_template() {
+	register_block_type_from_metadata(
+		__DIR__ . '/term-template',
+		array(
+			'render_callback' => 'render_block_core_term_template',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_term_template' );

package/src/term-template/save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function TermTemplateSave() {
+	return <InnerBlocks.Content />;
+}

package/src/term-template/style.scss

@@ -0,0 +1,12 @@
+.wp-block-term-template {
+	margin-top: 0;
+	margin-bottom: 0;
+	max-width: 100%;
+	box-sizing: border-box;
+
+	&.is-layout-grid,
+	&.is-layout-flex {
+		list-style: none;
+		padding: 0;
+	}
+}