@wordpress/block-library 7.10.0 → 7.12.2-next.d6164808d3.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';
 
 /**
@@ -312,7 +315,7 @@ const useIsInvalidLink = ( kind, type, id ) => {
 	return [ isInvalid, isDraft ];
 };
 
-const useMissingText = ( type ) => {
+function getMissingText( type ) {
 	let missingText = '';
 
 	switch ( type ) {
@@ -338,7 +341,7 @@ const useMissingText = ( type ) => {
 	}
 
 	return missingText;
-};
+}
 
 /**
  * Removes HTML from a given string.
@@ -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 ) {
@@ -682,7 +678,7 @@ export default function NavigationLinkEdit( {
 		'wp-block-navigation-link__placeholder': ! url || isInvalid || isDraft,
 	} );
 
-	const missingText = useMissingText( type, isInvalid, isDraft );
+	const missingText = getMissingText( type );
 	/* translators: Whether the navigation link is Invalid or a Draft. */
 	const placeholderText = `(${
 		isInvalid ? __( 'Invalid' ) : __( 'Draft' )
@@ -849,6 +845,7 @@ export default function NavigationLinkEdit( {
 							position="bottom center"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchorRef={ listItemRef.current }
+							__unstableShift
 						>
 							<LinkControl
 								hasTextControl

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 ) {
@@ -634,6 +630,7 @@ export default function NavigationSubmenuEdit( {
 							position="bottom center"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchorRef={ listItemRef.current }
+							__unstableShift
 						>
 							<LinkControl
 								className="wp-block-navigation-link__inline-link-input"

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
@@ -103,6 +102,14 @@ export default function PageListEdit( { context, clientId } ) {
 
 function useFrontPageId() {
 	return useSelect( ( select ) => {
+		const canReadSettings = select( coreStore ).canUser(
+			'read',
+			'settings'
+		);
+		if ( ! canReadSettings ) {
+			return undefined;
+		}
+
 		const site = select( coreStore ).getEntityRecord( 'root', 'site' );
 		return site?.show_on_front === 'page' && site?.page_on_front;
 	}, [] );
@@ -117,6 +124,7 @@ function usePageData() {
 			order: 'asc',
 			_fields: [ 'id', 'link', 'parent', 'title', 'menu_order' ],
 			per_page: -1,
+			context: 'view',
 		}
 	);
 
@@ -124,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,12 +34,17 @@
 		"anchor": true,
 		"className": false,
 		"color": {
+			"gradients": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": 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

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import { __, _x, isRTL } from '@wordpress/i18n';
 import {
-	ToolbarDropdownMenu,
+	ToolbarButton,
 	ToggleControl,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -33,19 +33,13 @@ const name = 'core/paragraph';
 function ParagraphRTLControl( { direction, setDirection } ) {
 	return (
 		isRTL() && (
-			<ToolbarDropdownMenu
-				controls={ [
-					{
-						icon: formatLtr,
-						title: _x( 'Left to right', 'editor button' ),
-						isActive: direction === 'ltr',
-						onClick() {
-							setDirection(
-								direction === 'ltr' ? undefined : 'ltr'
-							);
-						},
-					},
-				] }
+			<ToolbarButton
+				icon={ formatLtr }
+				title={ _x( 'Left to right', 'editor button' ) }
+				isActive={ direction === 'ltr' }
+				onClick={ () => {
+					setDirection( direction === 'ltr' ? undefined : 'ltr' );
+				} }
 			/>
 		)
 	);
@@ -152,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-form/edit.js

@@ -9,14 +9,8 @@ import classnames from 'classnames';
 import {
 	AlignmentControl,
 	BlockControls,
-	Warning,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Button } from '@wordpress/components';
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { __, _x, sprintf } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -30,72 +24,13 @@ export default function PostCommentsFormEdit( {
 } ) {
 	const { textAlign } = attributes;
 	const { postId, postType } = context;
-	const [ commentStatus, setCommentStatus ] = useEntityProp(
-		'postType',
-		postType,
-		'comment_status',
-		postId
-	);
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
 
-	const isSiteEditor = postType === undefined || postId === undefined;
-
-	const { defaultCommentStatus } = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings()
-				.__experimentalDiscussionSettings
-	);
-
-	const postTypeSupportsComments = useSelect( ( select ) =>
-		postType
-			? !! select( coreStore ).getPostType( postType )?.supports.comments
-			: false
-	);
-
-	let warning = false;
-	let actions;
-	let showPlaceholder = true;
-
-	if ( ! isSiteEditor && 'open' !== commentStatus ) {
-		if ( 'closed' === commentStatus ) {
-			warning = __(
-				'Post Comments Form block: Comments are not enabled for this item.'
-			);
-
-			actions = [
-				<Button
-					key="enableComments"
-					onClick={ () => setCommentStatus( 'open' ) }
-					variant="primary"
-				>
-					{ _x(
-						'Enable comments',
-						'action that affects the current post'
-					) }
-				</Button>,
-			];
-			showPlaceholder = false;
-		} else if ( ! postTypeSupportsComments ) {
-			warning = sprintf(
-				/* translators: 1: Post type (i.e. "post", "page") */
-				__(
-					'Post Comments Form block: Comments are not enabled for this post type (%s).'
-				),
-				postType
-			);
-			showPlaceholder = false;
-		} else if ( 'open' !== defaultCommentStatus ) {
-			warning = __(
-				'Post Comments Form block: Comments are not enabled.'
-			);
-			showPlaceholder = false;
-		}
-	}
-
 	return (
 		<>
 			<BlockControls group="block">
@@ -107,11 +42,7 @@ export default function PostCommentsFormEdit( {
 				/>
 			</BlockControls>
 			<div { ...blockProps }>
-				{ warning && (
-					<Warning actions={ actions }>{ warning }</Warning>
-				) }
-
-				{ showPlaceholder ? <CommentsForm /> : null }
+				<CommentsForm postId={ postId } postType={ postType } />
 			</div>
 		</>
 	);