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

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

package/src/term-template/variations.js

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { list, grid } from '@wordpress/icons';
+
+const createInnerBlocks = ( groupMetadata, groupStyle = {} ) => [
+	[
+		'core/group',
+		{
+			layout: {
+				type: 'flex',
+				orientation: 'horizontal',
+			},
+			style: {
+				spacing: {
+					blockGap: '0.5rem',
+				},
+				...groupStyle,
+			},
+			metadata: {
+				name: groupMetadata,
+			},
+		},
+		[
+			[
+				'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',
+								},
+							},
+						},
+					},
+				},
+			],
+		],
+	],
+];
+
+const variations = [
+	{
+		name: 'list',
+		title: __( 'List' ),
+		description: __( 'Display terms in a list layout.' ),
+		attributes: { layout: { type: 'default' } },
+		isDefault: true,
+		icon: list,
+		scope: [ 'block', 'inserter' ],
+		innerBlocks: createInnerBlocks( __( 'Term Name with Count' ) ),
+	},
+	{
+		name: 'grid',
+		title: __( 'Grid' ),
+		description: __( 'Display terms in a grid layout.' ),
+		attributes: { layout: { type: 'grid', columnCount: 3 } },
+		icon: grid,
+		scope: [ 'block', 'inserter' ],
+		innerBlocks: createInnerBlocks( __( 'Term Card' ), {
+			padding: '1rem',
+		} ),
+	},
+];
+
+export default variations;

package/src/terms-query/block.json

@@ -0,0 +1,49 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"__experimental": true,
+	"name": "core/terms-query",
+	"title": "Terms Query",
+	"category": "theme",
+	"description": "An advanced block that allows displaying taxonomy terms based on different query parameters and visual configurations.",
+	"keywords": [ "terms", "taxonomy", "categories", "tags", "list" ],
+	"textdomain": "default",
+	"attributes": {
+		"termQueryId": {
+			"type": "number"
+		},
+		"termQuery": {
+			"type": "object",
+			"default": {
+				"perPage": 10,
+				"pages": 0,
+				"taxonomy": "category",
+				"order": "asc",
+				"orderBy": "name",
+				"hideEmpty": true,
+				"include": [],
+				"exclude": [],
+				"parent": 0,
+				"hierarchical": false
+			}
+		},
+		"tagName": {
+			"type": "string",
+			"default": "div"
+		},
+		"namespace": {
+			"type": "string"
+		}
+	},
+	"providesContext": {
+		"termQueryId": "termQueryId",
+		"termQuery": "termQuery"
+	},
+	"supports": {
+		"align": [ "wide", "full" ],
+		"html": false,
+		"interactivity": true
+	},
+	"allowedBlocks": [ "core/term-template" ],
+	"style": "wp-block-terms-query"
+}

package/src/terms-query/edit.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import TermsQueryContent from './terms-query-content';
+
+const TermsQueryEdit = ( props ) => {
+	return <TermsQueryContent { ...props } />;
+};
+
+export default TermsQueryEdit;

package/src/terms-query/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { loop 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';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+	example: {},
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/terms-query/index.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Server-side rendering of the `core/terms-query` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/terms-query` block on the server.
+ *
+ * @since 6.9.0
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ *
+ * @return string Returns the output of the query, structured using the layout defined by the block's inner blocks.
+ */
+function render_block_core_terms_query( $attributes, $content ) {
+	$tag_name           = ! empty( $attributes['tagName'] ) ? $attributes['tagName'] : 'div';
+	$wrapper_attributes = get_block_wrapper_attributes();
+
+	return sprintf(
+		'<%1$s %2$s>%3$s</%1$s>',
+		$tag_name,
+		$wrapper_attributes,
+		$content
+	);
+}
+
+
+/**
+ * Registers the `core/terms-query` block on the server.
+ *
+ * @since 6.9.0
+ */
+function register_block_core_terms_query() {
+	register_block_type_from_metadata(
+		__DIR__ . '/terms-query',
+		array(
+			'render_callback' => 'render_block_core_terms_query',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_terms_query' );

package/src/terms-query/inspector-controls.js

@@ -0,0 +1,239 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	RangeControl,
+	SelectControl,
+	ToggleControl,
+} from '@wordpress/components';
+import {
+	InspectorControls,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
+
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
+
+export default function TermsQueryInspectorControls( {
+	attributes,
+	setQuery,
+	setAttributes,
+	TagName,
+	clientId,
+} ) {
+	const { termQuery } = attributes;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const { taxonomies } = useSelect( ( select ) => {
+		const { getEntityRecords } = select( coreStore );
+		const allTaxonomies = getEntityRecords( 'root', 'taxonomy' );
+		return {
+			taxonomies:
+				allTaxonomies?.filter( ( t ) => t.visibility.public ) || [],
+		};
+	}, [] );
+
+	const taxonomyOptions = taxonomies.map( ( taxonomy ) => ( {
+		label: taxonomy.name,
+		value: taxonomy.slug,
+	} ) );
+
+	return (
+		<>
+			<InspectorControls>
+				<ToolsPanel
+					label={ __( 'Terms Query Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							termQuery: {
+								taxonomy: 'category',
+								order: 'asc',
+								orderBy: 'name',
+								hideEmpty: true,
+								hierarchical: false,
+								parent: 0,
+								perPage: 10,
+							},
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						hasValue={ () => termQuery.taxonomy !== 'category' }
+						label={ __( 'Taxonomy' ) }
+						onDeselect={ () =>
+							setQuery( { taxonomy: 'category' } )
+						}
+						isShownByDefault
+					>
+						<SelectControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Taxonomy' ) }
+							options={ taxonomyOptions }
+							value={ termQuery.taxonomy }
+							onChange={ ( selectedTaxonomy ) =>
+								setQuery( { taxonomy: selectedTaxonomy } )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () =>
+							termQuery.orderBy !== 'name' ||
+							termQuery.order !== 'asc'
+						}
+						label={ __( 'Order by' ) }
+						onDeselect={ () =>
+							setQuery( { orderBy: 'name', order: 'asc' } )
+						}
+						isShownByDefault
+					>
+						<SelectControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							label={ __( 'Order by' ) }
+							options={ [
+								{
+									label: __( 'Name: A → Z' ),
+									value: 'name/asc',
+								},
+								{
+									label: __( 'Name: Z → A' ),
+									value: 'name/desc',
+								},
+								{
+									label: __( 'Count, high to low' ),
+									value: 'count/desc',
+								},
+								{
+									label: __( 'Count, low to high' ),
+									value: 'count/asc',
+								},
+							] }
+							value={ termQuery.orderBy + '/' + termQuery.order }
+							onChange={ ( orderBy ) => {
+								const [ newOrderBy, newOrder ] =
+									orderBy.split( '/' );
+								setQuery( {
+									orderBy: newOrderBy,
+									order: newOrder,
+								} );
+							} }
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => termQuery.parent !== 0 }
+						label={ __( 'Show only top level terms' ) }
+						onDeselect={ () => setQuery( { parent: 0 } ) }
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show only top level terms' ) }
+							checked={ termQuery.parent === 0 }
+							onChange={ ( showTopLevel ) => {
+								setQuery( {
+									parent: showTopLevel ? 0 : undefined,
+								} );
+								if ( showTopLevel && termQuery.hierarchical ) {
+									setQuery( { hierarchical: false } );
+								}
+							} }
+							disabled={ !! termQuery.hierarchical }
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => termQuery.hideEmpty !== true }
+						label={ __( 'Show empty terms' ) }
+						onDeselect={ () => setQuery( { hideEmpty: true } ) }
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show empty terms' ) }
+							checked={ ! termQuery.hideEmpty }
+							onChange={ ( showEmpty ) =>
+								setQuery( { hideEmpty: ! showEmpty } )
+							}
+						/>
+					</ToolsPanelItem>
+
+					<ToolsPanelItem
+						hasValue={ () => termQuery.hierarchical !== false }
+						label={ __( 'Show hierarchy' ) }
+						onDeselect={ () => setQuery( { hierarchical: false } ) }
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show hierarchy' ) }
+							checked={ termQuery.hierarchical }
+							onChange={ ( hierarchical ) => {
+								setQuery( { hierarchical } );
+								if ( hierarchical && termQuery.parent ) {
+									setQuery( { parent: 0 } );
+								}
+							} }
+							disabled={ termQuery.parent === 0 }
+						/>
+					</ToolsPanelItem>
+
+					{ ! termQuery.hierarchical && (
+						<ToolsPanelItem
+							hasValue={ () => termQuery.perPage !== 10 }
+							label={ __( 'Max terms' ) }
+							onDeselect={ () => setQuery( { perPage: 10 } ) }
+							isShownByDefault
+						>
+							<RangeControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Max terms' ) }
+								value={ termQuery.perPage }
+								min={ 0 }
+								max={ 100 }
+								onChange={ ( perPage ) => {
+									// Show all terms (-1) when 0 is selected.
+									setQuery( {
+										perPage: perPage === 0 ? -1 : perPage,
+									} );
+								} }
+								help={ __(
+									'Limit the number of terms you want to show. To show all terms, use 0 (zero).'
+								) }
+							/>
+						</ToolsPanelItem>
+					) }
+				</ToolsPanel>
+			</InspectorControls>
+			<InspectorControls group="advanced">
+				<HTMLElementControl
+					tagName={ TagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					clientId={ clientId }
+					options={ [
+						{ label: __( 'Default (<div>)' ), value: 'div' },
+						{ label: '<main>', value: 'main' },
+						{ label: '<section>', value: 'section' },
+						{ label: '<aside>', value: 'aside' },
+					] }
+				/>
+			</InspectorControls>
+		</>
+	);
+}