@wordpress/block-library 9.13.1-next.cd6172eb0.0 → 9.15.0

package/src/query-total/edit.js

@@ -0,0 +1,81 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, BlockControls } from '@wordpress/block-editor';
+import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { resultsFound, displayingResults } from './icons';
+
+export default function QueryTotalEdit( { attributes, setAttributes } ) {
+	const { displayType } = attributes;
+
+	// Block properties and classes.
+	const blockProps = useBlockProps();
+
+	const getButtonPositionIcon = () => {
+		switch ( displayType ) {
+			case 'total-results':
+				return resultsFound;
+			case 'range-display':
+				return displayingResults;
+		}
+	};
+
+	const buttonPositionControls = [
+		{
+			role: 'menuitemradio',
+			title: __( 'Total results' ),
+			isActive: displayType === 'total-results',
+			icon: resultsFound,
+			onClick: () => {
+				setAttributes( { displayType: 'total-results' } );
+			},
+		},
+		{
+			role: 'menuitemradio',
+			title: __( 'Range display' ),
+			isActive: displayType === 'range-display',
+			icon: displayingResults,
+			onClick: () => {
+				setAttributes( { displayType: 'range-display' } );
+			},
+		},
+	];
+
+	// Controls for the block.
+	const controls = (
+		<BlockControls>
+			<ToolbarGroup>
+				<ToolbarDropdownMenu
+					icon={ getButtonPositionIcon() }
+					label={ __( 'Change display type' ) }
+					controls={ buttonPositionControls }
+				/>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+
+	// Render output based on the selected display type.
+	const renderDisplay = () => {
+		if ( displayType === 'total-results' ) {
+			return <>{ __( '12 results found' ) }</>;
+		}
+
+		if ( displayType === 'range-display' ) {
+			return <>{ __( 'Displaying 1 – 10 of 12' ) }</>;
+		}
+
+		return null;
+	};
+
+	return (
+		<div { ...blockProps }>
+			{ controls }
+			{ renderDisplay() }
+		</div>
+	);
+}

package/src/query-total/icons.js

@@ -0,0 +1,43 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export const resultsFound = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M4 11h4v2H4v-2zm6 0h6v2h-6v-2zm8 0h2v2h-2v-2z" />
+	</SVG>
+);
+
+export const displayingResults = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M4 13h2v-2H4v2zm4 0h10v-2H8v2zm12 0h2v-2h-2v2z" />
+	</SVG>
+);
+
+export const queryTotal = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+	>
+		<Path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2Zm.5 14c0 .3-.2.5-.5.5H6c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h12c.3 0 .5.2.5.5v12Zm-7-6-4.1 5h8.8v-3h-1.5v1.5h-4.2l2.9-3.5-2.9-3.5h4.2V10h1.5V7H7.4l4.1 5Z" />
+	</SVG>
+);

package/src/query-total/index.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import initBlock from '../utils/init-block';
+import { queryTotal } from './icons';
+
+/* Block settings */
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon: queryTotal,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/query-total/index.php

@@ -0,0 +1,88 @@
+<?php
+/**
+ * Server-side rendering of the `core/query-total` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `query-total` block on the server.
+ *
+ * @since 6.8.0
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string The rendered block content.
+ */
+function render_block_core_query_total( $attributes, $content, $block ) {
+	global $wp_query;
+	$wrapper_attributes = get_block_wrapper_attributes();
+	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
+		$query_to_use = $wp_query;
+		$current_page = max( 1, get_query_var( 'paged', 1 ) );
+	} else {
+		$page_key     = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+		$current_page = isset( $_GET[ $page_key ] ) ? (int) $_GET[ $page_key ] : 1;
+		$query_to_use = new WP_Query( build_query_vars_from_query_block( $block, $current_page ) );
+	}
+
+	$max_rows       = $query_to_use->found_posts;
+	$posts_per_page = $query_to_use->get( 'posts_per_page' );
+
+	// Calculate the range of posts being displayed.
+	$start = ( $current_page - 1 ) * $posts_per_page + 1;
+	$end   = min( $start + $posts_per_page - 1, $max_rows );
+
+	// Prepare the display based on the `displayType` attribute.
+	$output = '';
+	switch ( $attributes['displayType'] ) {
+		case 'range-display':
+			if ( $start === $end ) {
+				$output = sprintf(
+					/* translators: 1: Start index of posts, 2: Total number of posts */
+					__( 'Displaying %1$s of %2$s' ),
+					$start,
+					$max_rows
+				);
+			} else {
+				$output = sprintf(
+					/* translators: 1: Start index of posts, 2: End index of posts, 3: Total number of posts */
+					__( 'Displaying %1$s – %2$s of %3$s' ),
+					$start,
+					$end,
+					$max_rows
+				);
+			}
+
+			break;
+
+		case 'total-results':
+		default:
+			// translators: %d: number of results.
+			$output = sprintf( _n( '%d result found', '%d results found', $max_rows ), $max_rows );
+			break;
+	}
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$output
+	);
+}
+
+/**
+ * Registers the `query-total` block.
+ *
+ * @since 6.8.0
+ */
+function register_block_core_query_total() {
+	register_block_type_from_metadata(
+		__DIR__ . '/query-total',
+		array(
+			'render_callback' => 'render_block_core_query_total',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_query_total' );

package/src/query-total/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/query-total/style.scss

@@ -0,0 +1,4 @@
+.wp-block-query-total {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/read-more/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { link as icon } from '@wordpress/icons';
 
 /**
@@ -16,6 +17,11 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	example: {
+		attributes: {
+			content: __( 'Read more' ),
+		},
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/site-logo/block.json

@@ -12,11 +12,13 @@
 		},
 		"isLink": {
 			"type": "boolean",
-			"default": true
+			"default": true,
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
-			"default": "_self"
+			"default": "_self",
+			"role": "content"
 		},
 		"shouldSyncIcon": {
 			"type": "boolean"

package/src/site-title/block.json

@@ -20,11 +20,13 @@
 		},
 		"isLink": {
 			"type": "boolean",
-			"default": true
+			"default": true,
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
-			"default": "_self"
+			"default": "_self",
+			"role": "content"
 		}
 	},
 	"example": {

package/src/site-title/edit.js

@@ -17,10 +17,19 @@ import {
 	useBlockProps,
 	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
-import { ToggleControl, PanelBody } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function SiteTitleEdit( {
 	attributes,
 	setAttributes,
@@ -43,6 +52,7 @@ export default function SiteTitleEdit( {
 		};
 	}, [] );
 	const { editEntityRecord } = useDispatch( coreStore );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	function setTitle( newTitle ) {
 		editEntityRecord( 'root', 'site', undefined, {
@@ -109,26 +119,53 @@ export default function SiteTitleEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							isLink: true,
+							linkTarget: '_self',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						hasValue={ () => ! isLink }
 						label={ __( 'Make title link to home' ) }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
-					{ isLink && (
+						onDeselect={ () => setAttributes( { isLink: true } ) }
+						isShownByDefault
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open in new tab' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									linkTarget: value ? '_blank' : '_self',
-								} )
+							label={ __( 'Make title link to home' ) }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
 							}
-							checked={ linkTarget === '_blank' }
+							checked={ isLink }
 						/>
+					</ToolsPanelItem>
+					{ isLink && (
+						<ToolsPanelItem
+							hasValue={ () => linkTarget !== '_self' }
+							label={ __( 'Open in new tab' ) }
+							onDeselect={ () =>
+								setAttributes( { linkTarget: '_self' } )
+							}
+							isShownByDefault
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			{ siteTitleContent }
 		</>

package/src/social-link/edit.js

@@ -22,10 +22,10 @@ import { useState, useRef } from '@wordpress/element';
 import {
 	Button,
 	Dropdown,
-	PanelBody,
-	PanelRow,
 	TextControl,
 	ToolbarButton,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { useMergeRefs } from '@wordpress/compose';
@@ -36,6 +36,7 @@ import { keyboardReturn } from '@wordpress/icons';
  * Internal dependencies
  */
 import { getIconBySite, getNameBySite } from './social-list';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const SocialLinkURLPopover = ( {
 	url,
@@ -109,6 +110,7 @@ const SocialLinkEdit = ( {
 	clientId,
 } ) => {
 	const { url, service, label = '', rel } = attributes;
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const {
 		showLabels,
 		iconColor,
@@ -195,8 +197,21 @@ const SocialLinkEdit = ( {
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<PanelRow>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( { label: undefined } );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						isShownByDefault
+						label={ __( 'Text' ) }
+						hasValue={ () => !! label }
+						onDeselect={ () => {
+							setAttributes( { label: undefined } );
+						} }
+					>
 						<TextControl
 							__next40pxDefaultSize
 							__nextHasNoMarginBottom
@@ -210,8 +225,8 @@ const SocialLinkEdit = ( {
 							}
 							placeholder={ socialLinkName }
 						/>
-					</PanelRow>
-				</PanelBody>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<TextControl

package/src/social-links/edit.js

@@ -22,14 +22,20 @@ import {
 import {
 	MenuGroup,
 	MenuItem,
-	PanelBody,
 	ToggleControl,
 	ToolbarDropdownMenu,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 const sizeOptions = [
 	{ name: __( 'Small' ), value: 'has-small-icon-size' },
 	{ name: __( 'Normal' ), value: 'has-normal-icon-size' },
@@ -68,6 +74,8 @@ export function SocialLinksEdit( props ) {
 
 	const logosOnly = attributes.className?.includes( 'is-style-logos-only' );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	// Remove icon background color when logos only style is selected or
 	// restore it when any other style is selected.
 	const backgroundBackupRef = useRef( {} );
@@ -198,24 +206,53 @@ export function SocialLinksEdit( props ) {
 				</ToolbarDropdownMenu>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							openInNewTab: false,
+							showLabels: false,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						isShownByDefault
 						label={ __( 'Open links in new tab' ) }
-						checked={ openInNewTab }
-						onChange={ () =>
-							setAttributes( { openInNewTab: ! openInNewTab } )
+						hasValue={ () => !! openInNewTab }
+						onDeselect={ () =>
+							setAttributes( { openInNewTab: false } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open links in new tab' ) }
+							checked={ openInNewTab }
+							onChange={ () =>
+								setAttributes( {
+									openInNewTab: ! openInNewTab,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						isShownByDefault
 						label={ __( 'Show text' ) }
-						checked={ showLabels }
-						onChange={ () =>
-							setAttributes( { showLabels: ! showLabels } )
+						hasValue={ () => !! showLabels }
+						onDeselect={ () =>
+							setAttributes( { showLabels: false } )
 						}
-					/>
-				</PanelBody>
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show text' ) }
+							checked={ showLabels }
+							onChange={ () =>
+								setAttributes( { showLabels: ! showLabels } )
+							}
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			{ colorGradientSettings.hasColorsOrGradients && (
 				<InspectorControls group="color">

package/src/spacer/controls.js

@@ -10,10 +10,11 @@ import {
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import {
-	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { View } from '@wordpress/primitives';
@@ -94,28 +95,54 @@ export default function SpacerControls( {
 } ) {
 	return (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						width: undefined,
+						height: '100px',
+					} );
+				} }
+			>
 				{ orientation === 'horizontal' && (
-					<DimensionInput
+					<ToolsPanelItem
 						label={ __( 'Width' ) }
-						value={ width }
-						onChange={ ( nextWidth ) =>
-							setAttributes( { width: nextWidth } )
+						isShownByDefault
+						hasValue={ () => width !== undefined }
+						onDeselect={ () =>
+							setAttributes( { width: undefined } )
 						}
-						isResizing={ isResizing }
-					/>
+					>
+						<DimensionInput
+							label={ __( 'Width' ) }
+							value={ width }
+							onChange={ ( nextWidth ) =>
+								setAttributes( { width: nextWidth } )
+							}
+							isResizing={ isResizing }
+						/>
+					</ToolsPanelItem>
 				) }
 				{ orientation !== 'horizontal' && (
-					<DimensionInput
+					<ToolsPanelItem
 						label={ __( 'Height' ) }
-						value={ height }
-						onChange={ ( nextHeight ) =>
-							setAttributes( { height: nextHeight } )
+						isShownByDefault
+						hasValue={ () => height !== '100px' }
+						onDeselect={ () =>
+							setAttributes( { height: '100px' } )
 						}
-						isResizing={ isResizing }
-					/>
+					>
+						<DimensionInput
+							label={ __( 'Height' ) }
+							value={ height }
+							onChange={ ( nextHeight ) =>
+								setAttributes( { height: nextHeight } )
+							}
+							isResizing={ isResizing }
+						/>
+					</ToolsPanelItem>
 				) }
-			</PanelBody>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 }

package/src/style.scss

@@ -37,6 +37,7 @@
 @import "./post-author-biography/style.scss";
 @import "./post-comments-form/style.scss";
 @import "./post-content/style.scss";
+@import "./post-comments-link/style.scss";
 @import "./post-date/style.scss";
 @import "./post-excerpt/style.scss";
 @import "./post-featured-image/style.scss";
@@ -50,6 +51,7 @@
 @import "./post-template/style.scss";
 @import "./query-pagination/style.scss";
 @import "./query-title/style.scss";
+@import "./query-total/style.scss";
 @import "./quote/style.scss";
 @import "./read-more/style.scss";
 @import "./rss/style.scss";

package/src/table/block.json

@@ -195,11 +195,14 @@
 				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-table > table",
 		"interactivity": {
 			"clientNavigation": true
 		}
 	},
+	"selectors": {
+		"root": ".wp-block-table > table",
+		"spacing": ".wp-block-table"
+	},
 	"styles": [
 		{
 			"name": "regular",