@wordpress/block-library 7.11.0 → 7.13.0

package/src/navigation-link/edit.js

@@ -42,7 +42,10 @@ import {
 } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	store as coreStore,
+	useResourcePermissions,
+} from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 
 /**
@@ -463,14 +466,15 @@ export default function NavigationLinkEdit( {
 	const itemLabelPlaceholder = __( 'Add link…' );
 	const ref = useRef();
 
+	const pagesPermissions = useResourcePermissions( 'pages' );
+	const postsPermissions = useResourcePermissions( 'posts' );
+
 	const {
 		innerBlocks,
 		isAtMaxNesting,
 		isTopLevelLink,
 		isParentOfSelectedBlock,
 		hasChildren,
-		userCanCreatePages,
-		userCanCreatePosts,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -497,14 +501,6 @@ export default function NavigationLinkEdit( {
 					true
 				),
 				hasChildren: !! getBlockCount( clientId ),
-				userCanCreatePages: select( coreStore ).canUser(
-					'create',
-					'pages'
-				),
-				userCanCreatePosts: select( coreStore ).canUser(
-					'create',
-					'posts'
-				),
 			};
 		},
 		[ clientId ]
@@ -606,9 +602,9 @@ export default function NavigationLinkEdit( {
 
 	let userCanCreate = false;
 	if ( ! type || type === 'page' ) {
-		userCanCreate = userCanCreatePages;
+		userCanCreate = pagesPermissions.canCreate;
 	} else if ( type === 'post' ) {
-		userCanCreate = userCanCreatePosts;
+		userCanCreate = postsPermissions.canCreate;
 	}
 
 	async function handleCreate( pageTitle ) {

package/src/navigation-link/index.php

@@ -150,7 +150,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] );
+	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === (int) $attributes['id'] );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(

package/src/navigation-submenu/edit.js

@@ -39,7 +39,10 @@ import {
 } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
-import { store as coreStore } from '@wordpress/core-data';
+import {
+	useResourcePermissions,
+	store as coreStore,
+} from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
 import { createBlock } from '@wordpress/blocks';
 
@@ -294,6 +297,9 @@ export default function NavigationSubmenuEdit( {
 	const itemLabelPlaceholder = __( 'Add text…' );
 	const ref = useRef();
 
+	const pagesPermissions = useResourcePermissions( 'pages' );
+	const postsPermissions = useResourcePermissions( 'posts' );
+
 	const {
 		isAtMaxNesting,
 		isTopLevelItem,
@@ -301,8 +307,6 @@ export default function NavigationSubmenuEdit( {
 		isImmediateParentOfSelectedBlock,
 		hasChildren,
 		selectedBlockHasChildren,
-		userCanCreatePages,
-		userCanCreatePosts,
 		onlyDescendantIsEmptyLink,
 	} = useSelect(
 		( select ) => {
@@ -348,14 +352,6 @@ export default function NavigationSubmenuEdit( {
 				),
 				hasChildren: !! getBlockCount( clientId ),
 				selectedBlockHasChildren: !! selectedBlockChildren?.length,
-				userCanCreatePages: select( coreStore ).canUser(
-					'create',
-					'pages'
-				),
-				userCanCreatePosts: select( coreStore ).canUser(
-					'create',
-					'posts'
-				),
 				onlyDescendantIsEmptyLink: _onlyDescendantIsEmptyLink,
 			};
 		},
@@ -426,9 +422,9 @@ export default function NavigationSubmenuEdit( {
 
 	let userCanCreate = false;
 	if ( ! type || type === 'page' ) {
-		userCanCreate = userCanCreatePages;
+		userCanCreate = pagesPermissions.canCreate;
 	} else if ( type === 'post' ) {
-		userCanCreate = userCanCreatePosts;
+		userCanCreate = postsPermissions.canCreate;
 	}
 
 	async function handleCreate( pageTitle ) {

package/src/navigation-submenu/index.php

@@ -148,7 +148,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] );
+	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === (int) $attributes['id'] );
 
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];

package/src/page-list/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { sortBy } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -133,7 +132,12 @@ function usePageData() {
 		// TODO: Once the REST API supports passing multiple values to
 		// 'orderby', this can be removed.
 		// https://core.trac.wordpress.org/ticket/39037
-		const sortedPages = sortBy( pages, [ 'menu_order', 'title.rendered' ] );
+		const sortedPages = [ ...( pages ?? [] ) ].sort( ( a, b ) => {
+			if ( a.menu_order === b.menu_order ) {
+				return a.title.rendered.localeCompare( b.title.rendered );
+			}
+			return a.menu_order - b.menu_order;
+		} );
 		const pagesByParentId = sortedPages.reduce( ( accumulator, page ) => {
 			const { parent } = page;
 			if ( accumulator.has( parent ) ) {

package/src/page-list/index.php

@@ -328,9 +328,9 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	);
 }
 
-	/**
-	 * Registers the `core/pages` block on server.
-	 */
+/**
+ * Registers the `core/pages` block on server.
+ */
 function register_block_core_page_list() {
 	register_block_type_from_metadata(
 		__DIR__ . '/page-list',
@@ -339,4 +339,4 @@ function register_block_core_page_list() {
 		)
 	);
 }
-	add_action( 'init', 'register_block_core_page_list' );
+add_action( 'init', 'register_block_core_page_list' );

package/src/paragraph/block.json

@@ -34,15 +34,22 @@
 		"anchor": true,
 		"className": false,
 		"color": {
+			"gradients": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
 			"__experimentalLetterSpacing": true,

package/src/paragraph/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -74,21 +73,27 @@ const migrateCustomColorsAndFontSizes = ( attributes ) => {
 	if ( attributes.customFontSize ) {
 		style.typography = { fontSize: attributes.customFontSize };
 	}
+
+	const {
+		customTextColor,
+		customBackgroundColor,
+		customFontSize,
+		...restAttributes
+	} = attributes;
+
 	return {
-		...omit( attributes, [
-			'customTextColor',
-			'customBackgroundColor',
-			'customFontSize',
-		] ),
+		...restAttributes,
 		style,
 	};
 };
 
+const { style, ...restBlockAttributes } = blockAttributes;
+
 const deprecated = [
 	{
 		supports,
 		attributes: {
-			...omit( blockAttributes, [ 'style' ] ),
+			...restBlockAttributes,
 			customTextColor: {
 				type: 'string',
 			},
@@ -153,7 +158,7 @@ const deprecated = [
 	{
 		supports,
 		attributes: {
-			...omit( blockAttributes, [ 'style' ] ),
+			...restBlockAttributes,
 			customTextColor: {
 				type: 'string',
 			},
@@ -218,7 +223,7 @@ const deprecated = [
 	{
 		supports,
 		attributes: {
-			...omit( blockAttributes, [ 'style' ] ),
+			...restBlockAttributes,
 			customTextColor: {
 				type: 'string',
 			},
@@ -284,15 +289,12 @@ const deprecated = [
 	},
 	{
 		supports,
-		attributes: omit(
-			{
-				...blockAttributes,
-				fontSize: {
-					type: 'number',
-				},
+		attributes: {
+			...restBlockAttributes,
+			fontSize: {
+				type: 'number',
 			},
-			[ 'style' ]
-		),
+		},
 		save( { attributes } ) {
 			const {
 				width,
@@ -325,25 +327,21 @@ const deprecated = [
 			);
 		},
 		migrate( attributes ) {
-			return migrateCustomColorsAndFontSizes(
-				omit( {
-					...attributes,
-					customFontSize: Number.isFinite( attributes.fontSize )
-						? attributes.fontSize
+			return migrateCustomColorsAndFontSizes( {
+				...attributes,
+				customFontSize: Number.isFinite( attributes.fontSize )
+					? attributes.fontSize
+					: undefined,
+				customTextColor:
+					attributes.textColor && '#' === attributes.textColor[ 0 ]
+						? attributes.textColor
 						: undefined,
-					customTextColor:
-						attributes.textColor &&
-						'#' === attributes.textColor[ 0 ]
-							? attributes.textColor
-							: undefined,
-					customBackgroundColor:
-						attributes.backgroundColor &&
-						'#' === attributes.backgroundColor[ 0 ]
-							? attributes.backgroundColor
-							: undefined,
-				} ),
-				[ 'fontSize', 'textColor', 'backgroundColor', 'style' ]
-			);
+				customBackgroundColor:
+					attributes.backgroundColor &&
+					'#' === attributes.backgroundColor[ 0 ]
+						? attributes.backgroundColor
+						: undefined,
+			} );
 		},
 	},
 	{

package/src/paragraph/edit.js

@@ -146,6 +146,7 @@ function ParagraphBlock( {
 				}
 				data-empty={ content ? false : true }
 				placeholder={ placeholder || __( 'Type / to choose a block' ) }
+				data-custom-placeholder={ placeholder ? true : undefined }
 				__unstableEmbedURLOnPaste
 				__unstableAllowPrefixTransformations
 			/>

package/src/paragraph/editor.scss

@@ -3,7 +3,7 @@
 	min-height: auto !important;
 }
 
-// Hide multiple sequential paragraphs.
+// Hide multiple sequential paragraphs, but don't hide placeholders if a custom placeholder is set.
 .block-editor-block-list__block[data-empty="true"] {
 	[data-rich-text-placeholder] {
 		opacity: 1;
@@ -11,7 +11,9 @@
 }
 
 .block-editor-block-list__block[data-empty="true"] + .block-editor-block-list__block[data-empty="true"] {
-	[data-rich-text-placeholder] {
-		opacity: 0;
+	&:not([data-custom-placeholder="true"]) {
+		[data-rich-text-placeholder] {
+			opacity: 0;
+		}
 	}
 }

package/src/post-author/block.json

@@ -35,10 +35,12 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontStyle": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
-			"__experimentalLetterSpacing": true,
+			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/post-author/edit.js

@@ -162,9 +162,12 @@ function PostAuthorEdit( {
 						{ authorDetails?.name || __( 'Post Author' ) }
 					</p>
 					{ showBio && (
-						<p className="wp-block-post-author__bio">
-							{ authorDetails?.description }
-						</p>
+						<p
+							className="wp-block-post-author__bio"
+							dangerouslySetInnerHTML={ {
+								__html: authorDetails?.description,
+							} }
+						/>
 					) }
 				</div>
 			</div>

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

@@ -32,6 +32,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true

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

@@ -55,7 +55,10 @@ function PostAuthorBiographyEdit( {
 					} }
 				/>
 			</BlockControls>
-			<div { ...blockProps }> { displayAuthorBiography } </div>
+			<div
+				{ ...blockProps }
+				dangerouslySetInnerHTML={ { __html: displayAuthorBiography } }
+			/>
 		</>
 	);
 }

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

@@ -43,7 +43,11 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
-			"__experimentalLetterSpacing": true
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	}
 }

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

@@ -25,8 +25,11 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontStyle": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true

package/src/post-comments-count/edit.js

@@ -49,6 +49,14 @@ export default function PostCommentsCountEdit( {
 		} );
 	}, [ postId ] );
 
+	const hasPostAndComments = postId && commentsCount !== undefined;
+	const blockStyles = {
+		...blockProps.style,
+		textDecoration: hasPostAndComments
+			? blockProps.style?.textDecoration
+			: undefined,
+	};
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -59,8 +67,8 @@ export default function PostCommentsCountEdit( {
 					} }
 				/>
 			</BlockControls>
-			<div { ...blockProps }>
-				{ postId && commentsCount !== undefined ? (
+			<div { ...blockProps } style={ blockStyles }>
+				{ hasPostAndComments ? (
 					commentsCount
 				) : (
 					<Warning>

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

@@ -26,10 +26,12 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontStyle": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
-			"__experimentalLetterSpacing": true,
+			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

package/src/post-content/edit.js

@@ -7,7 +7,8 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	useSetting,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	store as blockEditorStore,
 	Warning,
 } from '@wordpress/block-editor';
@@ -118,15 +119,14 @@ function RecursionError() {
 export default function PostContentEdit( { context, attributes } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const { layout = {} } = attributes;
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( contextPostId );
+	const hasAlreadyRendered = useHasRecursion( contextPostId );
 
 	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
 		return <RecursionError />;
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ contextPostId }>
 			{ contextPostId && contextPostType ? (
 				<Content context={ context } layout={ layout } />
 			) : (

package/src/post-date/block.json

@@ -16,6 +16,10 @@
 		"isLink": {
 			"type": "boolean",
 			"default": false
+		},
+		"displayType": {
+			"type": "string",
+			"default": "date"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
@@ -30,6 +34,10 @@
 				"link": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
@@ -37,6 +45,7 @@
 			"__experimentalFontWeight": true,
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
 			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true

package/src/post-date/edit.js

@@ -33,7 +33,7 @@ import { DOWN } from '@wordpress/keycodes';
 import { useSelect } from '@wordpress/data';
 
 export default function PostDateEdit( {
-	attributes: { textAlign, format, isLink },
+	attributes: { textAlign, format, isLink, displayType },
 	context: { postId, postType: postTypeSlug, queryId },
 	setAttributes,
 } ) {
@@ -58,9 +58,10 @@ export default function PostDateEdit( {
 	const [ date, setDate ] = useEntityProp(
 		'postType',
 		postTypeSlug,
-		'date',
+		displayType,
 		postId
 	);
+
 	const postType = useSelect(
 		( select ) =>
 			postTypeSlug
@@ -155,6 +156,15 @@ export default function PostDateEdit( {
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
+					<ToggleControl
+						label={ __( 'Display last modified date' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								displayType: value ? 'modified' : 'date',
+							} )
+						}
+						checked={ displayType === 'modified' }
+					/>
 				</PanelBody>
 			</InspectorControls>
 

package/src/post-date/index.php

@@ -21,7 +21,15 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	$post_ID            = $block->context['postId'];
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
-	$formatted_date     = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+
+	if ( isset( $attributes['displayType'] ) && 'modified' === $attributes['displayType'] ) {
+		$formatted_date   = get_the_modified_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+		$unformatted_date = esc_attr( get_the_modified_date( 'c', $post_ID ) );
+	} else {
+		$formatted_date   = get_the_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $post_ID );
+		$unformatted_date = esc_attr( get_the_date( 'c', $post_ID ) );
+	}
+
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$formatted_date = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $formatted_date );
 	}
@@ -29,7 +37,7 @@ function render_block_core_post_date( $attributes, $content, $block ) {
 	return sprintf(
 		'<div %1$s><time datetime="%2$s">%3$s</time></div>',
 		$wrapper_attributes,
-		esc_attr( get_the_date( 'c', $post_ID ) ),
+		$unformatted_date,
 		$formatted_date
 	);
 }

package/src/post-date/style.scss

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

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

@@ -23,6 +23,15 @@
 		},
 		"sizeSlug": {
 			"type": "string"
+		},
+		"rel": {
+			"type": "string",
+			"attribute": "rel",
+			"default": ""
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],
@@ -33,6 +42,18 @@
 			"text": false,
 			"background": false
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"width": true,
+			"__experimentalSelector": "img, .block-editor-media-placeholder",
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"width": true
+			}
+		},
 		"html": false,
 		"spacing": {
 			"margin": true,