@wordpress/block-library 9.14.0 → 9.15.0

package/src/post-featured-image/edit.js

@@ -11,11 +11,12 @@ import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	ToggleControl,
-	PanelBody,
 	Placeholder,
 	Button,
 	Spinner,
 	TextControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -38,6 +39,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import DimensionControls from './dimension-controls';
 import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -183,6 +185,8 @@ export default function PostFeaturedImageEdit( {
 		setTemporaryURL();
 	};
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const controls = blockEditingMode === 'default' && (
 		<>
 			<InspectorControls group="color">
@@ -201,9 +205,18 @@ export default function PostFeaturedImageEdit( {
 				/>
 			</InspectorControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							isLink: false,
+							linkTarget: '_self',
+							rel: '',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={
 							postType?.labels.singular_name
 								? sprintf(
@@ -213,11 +226,42 @@ export default function PostFeaturedImageEdit( {
 								  )
 								: __( 'Link to post' )
 						}
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
+						isShownByDefault
+						hasValue={ () => !! isLink }
+						onDeselect={ () =>
+							setAttributes( {
+								isLink: false,
+							} )
+						}
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={
+								postType?.labels.singular_name
+									? sprintf(
+											// translators: %s: Name of the post type e.g: "post".
+											__( 'Link to %s' ),
+											postType.labels.singular_name
+									  )
+									: __( 'Link to post' )
+							}
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
+							}
+							checked={ isLink }
+						/>
+					</ToolsPanelItem>
 					{ isLink && (
-						<>
+						<ToolsPanelItem
+							label={ __( 'Open in new tab' ) }
+							isShownByDefault
+							hasValue={ () => '_self' !== linkTarget }
+							onDeselect={ () =>
+								setAttributes( {
+									linkTarget: '_self',
+								} )
+							}
+						>
 							<ToggleControl
 								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
@@ -228,6 +272,19 @@ export default function PostFeaturedImageEdit( {
 								}
 								checked={ linkTarget === '_blank' }
 							/>
+						</ToolsPanelItem>
+					) }
+					{ isLink && (
+						<ToolsPanelItem
+							label={ __( 'Link rel' ) }
+							isShownByDefault
+							hasValue={ () => !! rel }
+							onDeselect={ () =>
+								setAttributes( {
+									rel: '',
+								} )
+							}
+						>
 							<TextControl
 								__next40pxDefaultSize
 								__nextHasNoMarginBottom
@@ -237,9 +294,9 @@ export default function PostFeaturedImageEdit( {
 									setAttributes( { rel: newRel } )
 								}
 							/>
-						</>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 		</>
 	);

package/src/post-navigation-link/block.json

@@ -34,12 +34,6 @@
 			"default": ""
 		}
 	},
-	"example": {
-		"attributes": {
-			"label": "Next post",
-			"arrow": "arrow"
-		}
-	},
 	"usesContext": [ "postType" ],
 	"supports": {
 		"reusable": false,

package/src/post-navigation-link/index.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -12,6 +17,12 @@ export { metadata, name };
 export const settings = {
 	edit,
 	variations,
+	example: {
+		attributes: {
+			label: __( 'Next post' ),
+			arrow: 'arrow',
+		},
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/post-navigation-link/variations.js

@@ -17,7 +17,7 @@ const variations = [
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: 'Next post',
+				label: __( 'Next post' ),
 				arrow: 'arrow',
 			},
 		},
@@ -33,7 +33,7 @@ const variations = [
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: 'Previous post',
+				label: __( 'Previous post' ),
 				arrow: 'arrow',
 			},
 		},

package/src/post-template/block.json

@@ -43,15 +43,25 @@
 			}
 		},
 		"spacing": {
+			"margin": true,
+			"padding": true,
 			"blockGap": {
 				"__experimentalDefault": "1.25em"
 			},
 			"__experimentalDefaultControls": {
-				"blockGap": true
+				"blockGap": true,
+				"padding": false,
+				"margin": false
 			}
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	},
 	"style": "wp-block-post-template",

package/src/post-template/style.scss

@@ -4,6 +4,8 @@
 	max-width: 100%;
 	list-style: none;
 	padding: 0;
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
 
 	// These rules no longer apply but should be kept for backwards compatibility.
 	&.is-flex-container {

package/src/post-title/block.json

@@ -20,16 +20,19 @@
 		},
 		"isLink": {
 			"type": "boolean",
-			"default": false
+			"default": false,
+			"role": "content"
 		},
 		"rel": {
 			"type": "string",
 			"attribute": "rel",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
-			"default": "_self"
+			"default": "_self",
+			"role": "content"
 		}
 	},
 	"example": {

package/src/query-no-results/block.json

@@ -8,16 +8,6 @@
 	"ancestor": [ "core/query" ],
 	"textdomain": "default",
 	"usesContext": [ "queryId", "query" ],
-	"example": {
-		"innerBlocks": [
-			{
-				"name": "core/paragraph",
-				"attributes": {
-					"content": "No posts were found."
-				}
-			}
-		]
-	},
 	"supports": {
 		"align": true,
 		"reusable": false,

package/src/query-no-results/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { loop as icon } from '@wordpress/icons';
 
 /**
@@ -18,6 +19,16 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: __( 'No posts were found.' ),
+				},
+			},
+		],
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/query-pagination/edit.js

@@ -8,8 +8,11 @@ import {
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { PanelBody } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useEffect } from '@wordpress/element';
 
 /**
@@ -17,6 +20,7 @@ import { useEffect } from '@wordpress/element';
  */
 import { QueryPaginationArrowControls } from './query-pagination-arrow-controls';
 import { QueryPaginationLabelControl } from './query-pagination-label-control';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const TEMPLATE = [
 	[ 'core/query-pagination-previous' ],
@@ -46,36 +50,74 @@ export default function QueryPaginationEdit( {
 		},
 		[ clientId ]
 	);
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
+
 	// Always show label text if paginationArrow is set to 'none'.
 	useEffect( () => {
 		if ( paginationArrow === 'none' && ! showLabel ) {
+			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { showLabel: true } );
 		}
-	}, [ paginationArrow, setAttributes, showLabel ] );
+	}, [
+		paginationArrow,
+		setAttributes,
+		showLabel,
+		__unstableMarkNextChangeAsNotPersistent,
+	] );
+
 	return (
 		<>
 			{ hasNextPreviousBlocks && (
 				<InspectorControls>
-					<PanelBody title={ __( 'Settings' ) }>
-						<QueryPaginationArrowControls
-							value={ paginationArrow }
-							onChange={ ( value ) => {
-								setAttributes( { paginationArrow: value } );
-							} }
-						/>
-						{ paginationArrow !== 'none' && (
-							<QueryPaginationLabelControl
-								value={ showLabel }
+					<ToolsPanel
+						label={ __( 'Settings' ) }
+						resetAll={ () => {
+							setAttributes( {
+								paginationArrow: 'none',
+								showLabel: true,
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
+						<ToolsPanelItem
+							hasValue={ () => paginationArrow !== 'none' }
+							label={ __( 'Pagination arrow' ) }
+							onDeselect={ () =>
+								setAttributes( { paginationArrow: 'none' } )
+							}
+							isShownByDefault
+						>
+							<QueryPaginationArrowControls
+								value={ paginationArrow }
 								onChange={ ( value ) => {
-									setAttributes( { showLabel: value } );
+									setAttributes( { paginationArrow: value } );
 								} }
 							/>
+						</ToolsPanelItem>
+						{ paginationArrow !== 'none' && (
+							<ToolsPanelItem
+								hasValue={ () => ! showLabel }
+								label={ __( 'Show text' ) }
+								onDeselect={ () =>
+									setAttributes( { showLabel: true } )
+								}
+								isShownByDefault
+							>
+								<QueryPaginationLabelControl
+									value={ showLabel }
+									onChange={ ( value ) => {
+										setAttributes( { showLabel: value } );
+									} }
+								/>
+							</ToolsPanelItem>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				</InspectorControls>
 			) }
 			<nav { ...innerBlocksProps } />

package/src/query-pagination/query-pagination-label-control.js

@@ -9,9 +9,7 @@ export function QueryPaginationLabelControl( { value, onChange } ) {
 		<ToggleControl
 			__nextHasNoMarginBottom
 			label={ __( 'Show label text' ) }
-			help={ __(
-				'Toggle off to hide the label text, e.g. "Next Page".'
-			) }
+			help={ __( 'Make label text visible, e.g. "Next Page".' ) }
 			onChange={ onChange }
 			checked={ value === true }
 		/>

package/src/query-pagination-numbers/edit.js

@@ -3,7 +3,16 @@
  */
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
-import { PanelBody, RangeControl } from '@wordpress/components';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	RangeControl,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const createPaginationItem = ( content, Tag = 'a', extraClass = '' ) => (
 	<Tag key={ content } className={ `page-numbers ${ extraClass }` }>
@@ -46,28 +55,41 @@ export default function QueryPaginationNumbersEdit( {
 	const paginationNumbers = previewPaginationNumbers(
 		parseInt( midSize, 10 )
 	);
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<RangeControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => setAttributes( { midSize: 2 } ) }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Number of links' ) }
-						help={ __(
-							'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'
-						) }
-						value={ midSize }
-						onChange={ ( value ) => {
-							setAttributes( {
-								midSize: parseInt( value, 10 ),
-							} );
-						} }
-						min={ 0 }
-						max={ 5 }
-						withInputField={ false }
-					/>
-				</PanelBody>
+						hasValue={ () => midSize !== undefined }
+						onDeselect={ () => setAttributes( { midSize: 2 } ) }
+						isShownByDefault
+					>
+						<RangeControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Number of links' ) }
+							help={ __(
+								'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'
+							) }
+							value={ midSize }
+							onChange={ ( value ) => {
+								setAttributes( {
+									midSize: parseInt( value, 10 ),
+								} );
+							} }
+							min={ 0 }
+							max={ 5 }
+							withInputField={ false }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<div { ...useBlockProps() }>{ paginationNumbers }</div>
 		</>

package/src/query-pagination-previous/index.php

@@ -19,14 +19,14 @@
 function render_block_core_query_pagination_previous( $attributes, $content, $block ) {
 	$page_key            = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
 	$enhanced_pagination = isset( $block->context['enhancedPagination'] ) && $block->context['enhancedPagination'];
+	$max_page            = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 	$page                = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
-
-	$wrapper_attributes = get_block_wrapper_attributes();
-	$show_label         = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
-	$default_label      = __( 'Previous Page' );
-	$label_text         = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
-	$label              = $show_label ? $label_text : '';
-	$pagination_arrow   = get_query_pagination_arrow( $block, false );
+	$wrapper_attributes  = get_block_wrapper_attributes();
+	$show_label          = isset( $block->context['showLabel'] ) ? (bool) $block->context['showLabel'] : true;
+	$default_label       = __( 'Previous Page' );
+	$label_text          = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? esc_html( $attributes['label'] ) : $default_label;
+	$label               = $show_label ? $label_text : '';
+	$pagination_arrow    = get_query_pagination_arrow( $block, false );
 	if ( ! $label ) {
 		$wrapper_attributes .= ' aria-label="' . $label_text . '"';
 	}
@@ -44,13 +44,20 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 		add_filter( 'previous_posts_link_attributes', $filter_link_attributes );
 		$content = get_previous_posts_link( $label );
 		remove_filter( 'previous_posts_link_attributes', $filter_link_attributes );
-	} elseif ( 1 !== $page ) {
-		$content = sprintf(
-			'<a href="%1$s" %2$s>%3$s</a>',
-			esc_url( add_query_arg( $page_key, $page - 1 ) ),
-			$wrapper_attributes,
-			$label
-		);
+	} else {
+		$block_query     = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
+		$block_max_pages = $block_query->max_num_pages;
+		$total           = ! $max_page || $max_page > $block_max_pages ? $block_max_pages : $max_page;
+		wp_reset_postdata();
+
+		if ( 1 < $page && $page <= $total ) {
+			$content = sprintf(
+				'<a href="%1$s" %2$s>%3$s</a>',
+				esc_url( add_query_arg( $page_key, $page - 1 ) ),
+				$wrapper_attributes,
+				$label
+			);
+		}
 	}
 
 	if ( $enhanced_pagination && isset( $content ) ) {

package/src/query-total/block.json

@@ -40,6 +40,13 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
-	}
+	},
+	"style": "wp-block-query-total"
 }

package/src/query-total/edit.js

@@ -48,27 +48,25 @@ export default function QueryTotalEdit( { attributes, setAttributes } ) {
 
 	// Controls for the block.
 	const controls = (
-		<>
-			<BlockControls>
-				<ToolbarGroup>
-					<ToolbarDropdownMenu
-						icon={ getButtonPositionIcon() }
-						label={ __( 'Change display type' ) }
-						controls={ buttonPositionControls }
-					/>
-				</ToolbarGroup>
-			</BlockControls>
-		</>
+		<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 <div>{ __( '12 results found' ) }</div>;
+			return <>{ __( '12 results found' ) }</>;
 		}
 
 		if ( displayType === 'range-display' ) {
-			return <div>{ __( 'Displaying 1 – 10 of 12' ) }</div>;
+			return <>{ __( 'Displaying 1 – 10 of 12' ) }</>;
 		}
 
 		return null;

package/src/query-total/index.php

@@ -40,32 +40,28 @@ function render_block_core_query_total( $attributes, $content, $block ) {
 	switch ( $attributes['displayType'] ) {
 		case 'range-display':
 			if ( $start === $end ) {
-				$range_text = sprintf(
+				$output = sprintf(
 					/* translators: 1: Start index of posts, 2: Total number of posts */
 					__( 'Displaying %1$s of %2$s' ),
-					'<strong>' . $start . '</strong>',
-					'<strong>' . $max_rows . '</strong>'
+					$start,
+					$max_rows
 				);
 			} else {
-				$range_text = sprintf(
+				$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' ),
-					'<strong>' . $start . '</strong>',
-					'<strong>' . $end . '</strong>',
-					'<strong>' . $max_rows . '</strong>'
+					$start,
+					$end,
+					$max_rows
 				);
 			}
 
-			$output = sprintf( '<p>%s</p>', $range_text );
 			break;
 
 		case 'total-results':
 		default:
-			$output = sprintf(
-				'<p><strong>%d</strong> %s</p>',
-				$max_rows,
-				_n( 'result found', 'results found', $max_rows )
-			);
+			// translators: %d: number of results.
+			$output = sprintf( _n( '%d result found', '%d results found', $max_rows ), $max_rows );
 			break;
 	}
 

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