@wordpress/block-library 9.14.0 → 9.15.1

package/src/paragraph/edit.js

@@ -20,14 +20,16 @@ import {
 	useBlockProps,
 	useSettings,
 	useBlockEditingMode,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { getBlockSupport } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
-
 /**
  * Internal dependencies
  */
 import { useOnEnter } from './use-enter';
+import { unlock } from '../lock-unlock';
 
 function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
@@ -109,7 +111,11 @@ function ParagraphBlock( {
 	isSelected: isSingleSelected,
 	name,
 } ) {
-	const { align, content, direction, dropCap, placeholder } = attributes;
+	const isZoomOut = useSelect( ( select ) =>
+		unlock( select( blockEditorStore ) ).isZoomOut()
+	);
+
+	const { align, content, direction, dropCap } = attributes;
 	const blockProps = useBlockProps( {
 		ref: useOnEnter( { clientId, content } ),
 		className: clsx( {
@@ -119,6 +125,12 @@ function ParagraphBlock( {
 		style: { direction },
 	} );
 	const blockEditingMode = useBlockEditingMode();
+	let { placeholder } = attributes;
+	if ( isZoomOut ) {
+		placeholder = '';
+	} else if ( ! placeholder ) {
+		placeholder = __( 'Type / to choose a block' );
+	}
 
 	return (
 		<>
@@ -170,8 +182,10 @@ function ParagraphBlock( {
 						: __( 'Block: Paragraph' )
 				}
 				data-empty={ RichText.isEmpty( content ) }
-				placeholder={ placeholder || __( 'Type / to choose a block' ) }
-				data-custom-placeholder={ placeholder ? true : undefined }
+				placeholder={ placeholder }
+				data-custom-placeholder={
+					placeholder && ! isZoomOut ? true : undefined
+				}
 				__unstableEmbedURLOnPaste
 				__unstableAllowPrefixTransformations
 			/>

package/src/post-author/block.json

@@ -26,11 +26,13 @@
 		},
 		"isLink": {
 			"type": "boolean",
-			"default": false
+			"default": false,
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
-			"default": "_self"
+			"default": "_self",
+			"role": "content"
 		}
 	},
 	"usesContext": [ "postType", "postId", "queryId" ],

package/src/post-author/edit.js

@@ -21,7 +21,7 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
 const minimumUsersForCombobox = 25;
@@ -38,9 +38,9 @@ function PostAuthorEdit( {
 	setAttributes,
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { authorId, authorDetails, authors } = useSelect(
+	const { authorId, authorDetails, authors, supportsAuthor } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, getUser, getUsers } =
+			const { getEditedEntityRecord, getUser, getUsers, getPostType } =
 				select( coreStore );
 			const _authorId = getEditedEntityRecord(
 				'postType',
@@ -52,6 +52,8 @@ function PostAuthorEdit( {
 				authorId: _authorId,
 				authorDetails: _authorId ? getUser( _authorId ) : null,
 				authors: getUsers( AUTHORS_QUERY ),
+				supportsAuthor:
+					getPostType( postType )?.supports?.author ?? false,
 			};
 		},
 		[ postType, postId ]
@@ -97,6 +99,18 @@ function PostAuthorEdit( {
 	const showAuthorControl =
 		!! postId && ! isDescendentOfQueryLoop && authorOptions.length > 0;
 
+	if ( ! supportsAuthor ) {
+		return (
+			<div { ...blockProps }>
+				{ sprintf(
+					// translators: %s: Name of the post type e.g: "post".
+					__( 'This post type (%s) does not support the author.' ),
+					postType
+				) }
+			</div>
+		);
+	}
+
 	return (
 		<>
 			<InspectorControls>

package/src/post-author/index.php

@@ -26,6 +26,10 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 		return '';
 	}
 
+	if ( ! post_type_supports( $block->context['postType'], 'author' ) ) {
+		return '';
+	}
+
 	$avatar = ! empty( $attributes['avatarSize'] ) ? get_avatar(
 		$author_id,
 		$attributes['avatarSize']

package/src/post-author-name/block.json

@@ -12,11 +12,13 @@
 		},
 		"isLink": {
 			"type": "boolean",
-			"default": false
+			"default": false,
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
-			"default": "_self"
+			"default": "_self",
+			"role": "content"
 		}
 	},
 	"usesContext": [ "postType", "postId" ],

package/src/post-author-name/edit.js

@@ -13,7 +13,7 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 
@@ -22,9 +22,10 @@ function PostAuthorNameEdit( {
 	attributes: { textAlign, isLink, linkTarget },
 	setAttributes,
 } ) {
-	const { authorName } = useSelect(
+	const { authorName, supportsAuthor } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, getUser } = select( coreStore );
+			const { getEditedEntityRecord, getUser, getPostType } =
+				select( coreStore );
 			const _authorId = getEditedEntityRecord(
 				'postType',
 				postType,
@@ -33,6 +34,8 @@ function PostAuthorNameEdit( {
 
 			return {
 				authorName: _authorId ? getUser( _authorId ) : null,
+				supportsAuthor:
+					getPostType( postType )?.supports?.author ?? false,
 			};
 		},
 		[ postType, postId ]
@@ -90,7 +93,17 @@ function PostAuthorNameEdit( {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			<div { ...blockProps }> { displayAuthor } </div>
+			<div { ...blockProps }>
+				{ supportsAuthor
+					? displayAuthor
+					: sprintf(
+							// translators: %s: Name of the post type e.g: "post".
+							__(
+								'This post type (%s) does not support the author.'
+							),
+							postType
+					  ) }
+			</div>
 		</>
 	);
 }

package/src/post-author-name/index.php

@@ -26,6 +26,10 @@ function render_block_core_post_author_name( $attributes, $content, $block ) {
 		return '';
 	}
 
+	if ( ! post_type_supports( $block->context['postType'], 'author' ) ) {
+		return '';
+	}
+
 	$author_name = get_the_author_meta( 'display_name', $author_id );
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$author_name = sprintf( '<a href="%1$s" target="%2$s" class="wp-block-post-author-name__link">%3$s</a>', get_author_posts_url( $author_id ), esc_attr( $attributes['linkTarget'] ), $author_name );

package/src/post-comments-form/block.json

@@ -56,5 +56,10 @@
 		"wp-block-post-comments-form",
 		"wp-block-buttons",
 		"wp-block-button"
-	]
+	],
+	"example": {
+		"attributes": {
+			"textAlign": "center"
+		}
+	}
 }

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

@@ -42,6 +42,13 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
-	}
+	},
+	"style": "wp-block-post-comments-link"
 }

package/src/post-comments-link/style.scss

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

package/src/post-content/index.php

@@ -46,10 +46,33 @@ function render_block_core_post_content( $attributes, $content, $block ) {
 		$content .= wp_link_pages( array( 'echo' => 0 ) );
 	}
 
+	$ignored_hooked_blocks = get_post_meta( $post_id, '_wp_ignored_hooked_blocks', true );
+	if ( ! empty( $ignored_hooked_blocks ) ) {
+		$ignored_hooked_blocks  = json_decode( $ignored_hooked_blocks, true );
+		$attributes['metadata'] = array(
+			'ignoredHookedBlocks' => $ignored_hooked_blocks,
+		);
+	}
+
+	// Wrap in Post Content block so the Block Hooks algorithm can insert blocks
+	// that are hooked as first or last child of `core/post-content`.
+	$content = get_comment_delimited_block_content(
+		'core/post-content',
+		$attributes,
+		$content
+	);
+
+	// We need to remove the `core/post-content` block wrapper after the Block Hooks algorithm,
+	// but before `do_blocks` runs, as it would otherwise attempt to render the same block again --
+	// thus recursing infinitely.
+	add_filter( 'the_content', 'remove_serialized_parent_block', 8 );
+
 	/** This filter is documented in wp-includes/post-template.php */
 	$content = apply_filters( 'the_content', str_replace( ']]>', ']]>', $content ) );
 	unset( $seen_ids[ $post_id ] );
 
+	remove_filter( 'the_content', 'remove_serialized_parent_block', 8 );
+
 	if ( empty( $content ) ) {
 		return '';
 	}

package/src/post-date/block.json

@@ -15,7 +15,8 @@
 		},
 		"isLink": {
 			"type": "boolean",
-			"default": false
+			"default": false,
+			"role": "content"
 		},
 		"displayType": {
 			"type": "string",

package/src/post-date/edit.js

@@ -26,13 +26,19 @@ import {
 	ToolbarGroup,
 	ToolbarButton,
 	ToggleControl,
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { edit } from '@wordpress/icons';
 import { DOWN } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 export default function PostDateEdit( {
 	attributes: { textAlign, format, isLink, displayType },
 	context: { postId, postType: postTypeSlug, queryId },
@@ -44,6 +50,7 @@ export default function PostDateEdit( {
 			[ `wp-block-post-date__modified-date` ]: displayType === 'modified',
 		} ),
 	} );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -160,16 +167,37 @@ export default function PostDateEdit( {
 			</BlockControls>
 
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<DateFormatPicker
-						format={ format }
-						defaultFormat={ siteFormat }
-						onChange={ ( nextFormat ) =>
-							setAttributes( { format: nextFormat } )
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							format: undefined,
+							isLink: false,
+							displayType: 'date',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						hasValue={ () =>
+							format !== undefined && format !== siteFormat
+						}
+						label={ __( 'Date Format' ) }
+						onDeselect={ () =>
+							setAttributes( { format: undefined } )
 						}
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						isShownByDefault
+					>
+						<DateFormatPicker
+							format={ format }
+							defaultFormat={ siteFormat }
+							onChange={ ( nextFormat ) =>
+								setAttributes( { format: nextFormat } )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => isLink !== false }
 						label={
 							postType?.labels.singular_name
 								? sprintf(
@@ -179,23 +207,49 @@ export default function PostDateEdit( {
 								  )
 								: __( 'Link to post' )
 						}
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
-					<ToggleControl
-						__nextHasNoMarginBottom
+						onDeselect={ () => setAttributes( { isLink: false } ) }
+						isShownByDefault
+					>
+						<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.toLowerCase()
+									  )
+									: __( 'Link to post' )
+							}
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
+							}
+							checked={ isLink }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => displayType !== 'date' }
 						label={ __( 'Display last modified date' ) }
-						onChange={ ( value ) =>
-							setAttributes( {
-								displayType: value ? 'modified' : 'date',
-							} )
+						onDeselect={ () =>
+							setAttributes( { displayType: 'date' } )
 						}
-						checked={ displayType === 'modified' }
-						help={ __(
-							'Only shows if the post has been modified'
-						) }
-					/>
-				</PanelBody>
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Display last modified date' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									displayType: value ? 'modified' : 'date',
+								} )
+							}
+							checked={ displayType === 'modified' }
+							help={ __(
+								'Only shows if the post has been modified'
+							) }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 
 			<div { ...blockProps }>{ postDate }</div>

package/src/post-excerpt/edit.js

@@ -16,14 +16,22 @@ import {
 	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	RangeControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { useCanEditEntity } from '../utils/hooks';
+import {
+	useCanEditEntity,
+	useToolsPanelDropdownMenuProps,
+} from '../utils/hooks';
 
 const ELLIPSIS = '…';
 
@@ -41,6 +49,8 @@ export default function PostExcerptEditor( {
 		{ rendered: renderedExcerpt, protected: isProtected } = {},
 	] = useEntityProp( 'postType', postType, 'excerpt', postId );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	/**
 	 * Check if the post type supports excerpts.
 	 * Add an exception and return early for the "page" post type,
@@ -219,29 +229,56 @@ export default function PostExcerptEditor( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							showMoreOnNewLine: true,
+							excerptLength: 55,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						hasValue={ () => showMoreOnNewLine !== true }
 						label={ __( 'Show link on new line' ) }
-						checked={ showMoreOnNewLine }
-						onChange={ ( newShowMoreOnNewLine ) =>
-							setAttributes( {
-								showMoreOnNewLine: newShowMoreOnNewLine,
-							} )
+						onDeselect={ () =>
+							setAttributes( { showMoreOnNewLine: true } )
 						}
-					/>
-					<RangeControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Show link on new line' ) }
+							checked={ showMoreOnNewLine }
+							onChange={ ( newShowMoreOnNewLine ) =>
+								setAttributes( {
+									showMoreOnNewLine: newShowMoreOnNewLine,
+								} )
+							}
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => excerptLength !== 55 }
 						label={ __( 'Max number of words' ) }
-						value={ excerptLength }
-						onChange={ ( value ) => {
-							setAttributes( { excerptLength: value } );
-						} }
-						min="10"
-						max="100"
-					/>
-				</PanelBody>
+						onDeselect={ () =>
+							setAttributes( { excerptLength: 55 } )
+						}
+						isShownByDefault
+					>
+						<RangeControl
+							__next40pxDefaultSize
+							__nextHasNoMarginBottom
+							label={ __( 'Max number of words' ) }
+							value={ excerptLength }
+							onChange={ ( value ) => {
+								setAttributes( { excerptLength: value } );
+							} }
+							min="10"
+							max="100"
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ excerptContent }

package/src/post-featured-image/block.json

@@ -9,7 +9,8 @@
 	"attributes": {
 		"isLink": {
 			"type": "boolean",
-			"default": false
+			"default": false,
+			"role": "content"
 		},
 		"aspectRatio": {
 			"type": "string"
@@ -30,11 +31,13 @@
 		"rel": {
 			"type": "string",
 			"attribute": "rel",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",
-			"default": "_self"
+			"default": "_self",
+			"role": "content"
 		},
 		"overlayColor": {
 			"type": "string"

package/src/post-featured-image/dimension-controls.js

@@ -12,10 +12,18 @@ import {
 } from '@wordpress/components';
 import {
 	useSettings,
+	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const { ResolutionTool } = unlock( blockEditorPrivateApis );
+
 const SCALE_OPTIONS = (
 	<>
 		<ToggleGroupControlOption
@@ -223,30 +231,19 @@ const DimensionControls = ( {
 				</ToolsPanelItem>
 			) }
 			{ !! imageSizeOptions.length && (
-				<ToolsPanelItem
-					hasValue={ () => !! sizeSlug }
-					label={ __( 'Resolution' ) }
-					onDeselect={ () =>
-						setAttributes( { sizeSlug: undefined } )
+				<ResolutionTool
+					panelId={ clientId }
+					value={ sizeSlug }
+					defaultValue={ DEFAULT_SIZE }
+					options={ imageSizeOptions }
+					onChange={ ( nextSizeSlug ) =>
+						setAttributes( { sizeSlug: nextSizeSlug } )
 					}
+					isShownByDefault={ false }
 					resetAllFilter={ () => ( {
-						sizeSlug: undefined,
+						sizeSlug: DEFAULT_SIZE,
 					} ) }
-					isShownByDefault={ false }
-					panelId={ clientId }
-				>
-					<SelectControl
-						__next40pxDefaultSize
-						__nextHasNoMarginBottom
-						label={ __( 'Resolution' ) }
-						value={ sizeSlug || DEFAULT_SIZE }
-						options={ imageSizeOptions }
-						onChange={ ( nextSizeSlug ) =>
-							setAttributes( { sizeSlug: nextSizeSlug } )
-						}
-						help={ __( 'Select the size of the source image.' ) }
-					/>
-				</ToolsPanelItem>
+				/>
 			) }
 		</>
 	);