@wordpress/block-library 7.4.0 → 7.7.0

package/src/navigation-link/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape } from 'lodash';
+import { escape, unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -43,6 +43,7 @@ import {
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
 
 /**
  * Internal dependencies
@@ -239,6 +240,15 @@ export const updateNavigationLinkBlockAttributes = (
 		normalizedTitle !== normalizedURL &&
 		originalLabel !== title;
 
+	// Unfortunately this causes the escaping model to be inverted.
+	// The escaped content is stored in the block attributes (and ultimately in the database),
+	// and then the raw data is "recovered" when outputting into the DOM.
+	// It would be preferable to store the **raw** data in the block attributes and escape it in JS.
+	// Why? Because there isn't one way to escape data. Depending on the context, you need to do
+	// different transforms. It doesn't make sense to me to choose one of them for the purposes of storage.
+	// See also:
+	// - https://github.com/WordPress/gutenberg/pull/41063
+	// - https://github.com/WordPress/gutenberg/pull/18617.
 	const label = escapeTitle
 		? escape( title )
 		: originalLabel || escape( normalizedURL );
@@ -342,7 +352,35 @@ function navStripHTML( html ) {
  * Add transforms to Link Control
  */
 
-function LinkControlTransforms( { block, transforms, replace } ) {
+function LinkControlTransforms( { clientId, replace } ) {
+	const { getBlock, blockTransforms } = useSelect(
+		( select ) => {
+			const {
+				getBlock: _getBlock,
+				getBlockRootClientId,
+				getBlockTransformItems,
+			} = select( blockEditorStore );
+
+			return {
+				getBlock: _getBlock,
+				blockTransforms: getBlockTransformItems(
+					_getBlock( clientId ),
+					getBlockRootClientId( clientId )
+				),
+			};
+		},
+		[ clientId ]
+	);
+
+	const featuredBlocks = [
+		'core/site-logo',
+		'core/social-links',
+		'core/search',
+	];
+	const transforms = blockTransforms.filter( ( item ) => {
+		return featuredBlocks.includes( item.name );
+	} );
+
 	if ( ! transforms?.length ) {
 		return null;
 	}
@@ -359,8 +397,11 @@ function LinkControlTransforms( { block, transforms, replace } ) {
 							key={ `transform-${ index }` }
 							onClick={ () =>
 								replace(
-									block.clientId,
-									switchToBlockType( block, item.name )
+									clientId,
+									switchToBlockType(
+										getBlock( clientId ),
+										item.name
+									)
 								)
 							}
 							className="link-control-transform__item"
@@ -421,30 +462,20 @@ export default function NavigationLinkEdit( {
 		isAtMaxNesting,
 		isTopLevelLink,
 		isParentOfSelectedBlock,
-		hasDescendants,
+		hasChildren,
 		userCanCreatePages,
 		userCanCreatePosts,
-		thisBlock,
-		blockTransforms,
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlock,
 				getBlocks,
+				getBlockCount,
 				getBlockName,
 				getBlockRootClientId,
-				getClientIdsOfDescendants,
 				hasSelectedInnerBlock,
-				getSelectedBlockClientId,
 				getBlockParentsByBlockName,
-				getBlockTransformItems,
 			} = select( blockEditorStore );
 
-			const selectedBlockId = getSelectedBlockClientId();
-
-			const descendants = getClientIdsOfDescendants( [ clientId ] )
-				.length;
-
 			return {
 				innerBlocks: getBlocks( clientId ),
 				isAtMaxNesting:
@@ -459,14 +490,7 @@ export default function NavigationLinkEdit( {
 					clientId,
 					true
 				),
-				isImmediateParentOfSelectedBlock: hasSelectedInnerBlock(
-					clientId,
-					false
-				),
-				hasDescendants: !! descendants,
-				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
-					selectedBlockId,
-				] )?.length,
+				hasChildren: !! getBlockCount( clientId ),
 				userCanCreatePages: select( coreStore ).canUser(
 					'create',
 					'pages'
@@ -475,11 +499,6 @@ export default function NavigationLinkEdit( {
 					'create',
 					'posts'
 				),
-				thisBlock: getBlock( clientId ),
-				blockTransforms: getBlockTransformItems(
-					[ getBlock( clientId ) ],
-					getBlockRootClientId( clientId )
-				),
 			};
 		},
 		[ clientId ]
@@ -506,15 +525,6 @@ export default function NavigationLinkEdit( {
 		replaceBlock( clientId, newSubmenu );
 	}
 
-	const featuredBlocks = [
-		'core/site-logo',
-		'core/social-links',
-		'core/search',
-	];
-	const featuredTransforms = blockTransforms.filter( ( item ) => {
-		return featuredBlocks.includes( item.name );
-	} );
-
 	useEffect( () => {
 		// Show the LinkControl on mount if the URL is empty
 		// ( When adding a new menu item)
@@ -524,7 +534,7 @@ export default function NavigationLinkEdit( {
 			setIsLinkOpen( true );
 		}
 		// If block has inner blocks, transform to Submenu.
-		if ( hasDescendants ) {
+		if ( hasChildren ) {
 			transformToSubmenu();
 		}
 	}, [] );
@@ -606,7 +616,17 @@ export default function NavigationLinkEdit( {
 		return {
 			id: page.id,
 			type: postType,
-			title: page.title.rendered,
+			// Make `title` property consistent with that in `fetchLinkSuggestions` where the `rendered` title (containing HTML entities)
+			// is also being decoded. By being consistent in both locations we avoid having to branch in the rendering output code.
+			// Ideally in the future we will update both APIs to utilise the "raw" form of the title which is better suited to edit contexts.
+			// e.g.
+			// - title.raw = "Yes & No"
+			// - title.rendered = "Yes & No"
+			// - decodeEntities( title.rendered ) = "Yes & No"
+			// See:
+			// - https://github.com/WordPress/gutenberg/pull/41063
+			// - https://github.com/WordPress/gutenberg/blob/a1e1fdc0e6278457e9f4fc0b31ac6d2095f5450b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js#L212-L218
+			title: decodeEntities( page.title.rendered ),
 			url: page.link,
 			kind: 'post-type',
 		};
@@ -634,7 +654,7 @@ export default function NavigationLinkEdit( {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
-			'has-child': hasDescendants,
+			'has-child': hasChildren,
 			'has-text-color': !! textColor || !! customTextColor,
 			[ getColorClassName( 'color', textColor ) ]: !! textColor,
 			'has-background': !! backgroundColor || customBackgroundColor,
@@ -795,10 +815,20 @@ export default function NavigationLinkEdit( {
 										text={ tooltipText }
 									>
 										<>
-											<span>
+											<span
+												aria-label={ __(
+													'Navigation link text'
+												) }
+											>
 												{
-													/* Trim to avoid trailing white space when the placeholder text is not present */
-													`${ label } ${ placeholderText }`.trim()
+													// Some attributes are stored in an escaped form. It's a legacy issue.
+													// Ideally they would be stored in a raw, unescaped form.
+													// Unescape is used here to "recover" the escaped characters
+													// so they display without encoding.
+													// See `updateNavigationLinkBlockAttributes` for more details.
+													`${ unescape(
+														label
+													) } ${ placeholderText }`.trim()
 												}
 											</span>
 											<span className="wp-block-navigation-link__missing_text-tooltip">
@@ -860,10 +890,7 @@ export default function NavigationLinkEdit( {
 									! url
 										? () => (
 												<LinkControlTransforms
-													block={ thisBlock }
-													transforms={
-														featuredTransforms
-													}
+													clientId={ clientId }
 													replace={ replaceBlock }
 												/>
 										  )

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

@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	category as categoryIcon,
 	page as pageIcon,
-	postTitle as postIcon,
+	postContent as postIcon,
 	tag as tagIcon,
 } from '@wordpress/icons';
 

package/src/navigation-link/hooks.js

@@ -4,7 +4,7 @@
 import {
 	category,
 	page,
-	postTitle,
+	postContent,
 	tag,
 	customPostType,
 } from '@wordpress/icons';
@@ -17,7 +17,7 @@ import fallbackVariations from './fallback-variations';
 function getIcon( variationName ) {
 	switch ( variationName ) {
 		case 'post':
-			return postTitle;
+			return postContent;
 		case 'page':
 			return page;
 		case 'tag':

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -23,10 +23,10 @@ Object {
       "description": "A link to a post.",
       "icon": <SVG
         viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="https://www.w3.org/2000/svg"
       >
         <Path
-          d="M4 14.5h16V16H4zM4 18.5h9V20H4zM4 4h3c2 0 3 .86 3 2.583 0 .891-.253 1.554-.76 1.988-.505.435-1.24.652-2.204.652H5.542V12H4V4zm2.855 4c.53 0 .924-.114 1.18-.343.266-.228.398-.579.398-1.051 0-.473-.132-.82-.397-1.04-.265-.229-.67-.343-1.217-.343H5.542V8h1.313z"
+          d="M4 20h16v-1.5H4V20zm0-4.8h16v-1.5H4v1.5zm0-6.4v1.5h16V8.8H4zM16 4H4v1.5h12V4z"
         />
       </SVG>,
       "isActive": [Function],
@@ -120,10 +120,10 @@ Object {
       "description": "A link to a post.",
       "icon": <SVG
         viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
+        xmlns="https://www.w3.org/2000/svg"
       >
         <Path
-          d="M4 14.5h16V16H4zM4 18.5h9V20H4zM4 4h3c2 0 3 .86 3 2.583 0 .891-.253 1.554-.76 1.988-.505.435-1.24.652-2.204.652H5.542V12H4V4zm2.855 4c.53 0 .924-.114 1.18-.343.266-.228.398-.579.398-1.051 0-.473-.132-.82-.397-1.04-.265-.229-.67-.343-1.217-.343H5.542V8h1.313z"
+          d="M4 20h16v-1.5H4V20zm0-4.8h16v-1.5H4v1.5zm0-6.4v1.5h16V8.8H4zM16 4H4v1.5h12V4z"
         />
       </SVG>,
       "isActive": [Function],

package/src/navigation-link/test/edit.js

@@ -372,26 +372,6 @@ describe( 'edit', () => {
 					url: 'https://wordpress.org',
 				} );
 			} );
-			// https://github.com/WordPress/gutenberg/pull/18617
-			it( 'label is javascript escaped', () => {
-				const setAttributes = jest.fn();
-				const linkSuggestion = {
-					opensInNewTab: false,
-					title: '<Navigation />',
-					type: 'URL',
-					url: 'https://wordpress.local?p=1',
-				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
-				expect( setAttributes ).toHaveBeenCalledWith( {
-					opensInNewTab: false,
-					label: '&lt;Navigation /&gt;',
-					kind: 'custom',
-					url: 'https://wordpress.local?p=1',
-				} );
-			} );
 			// https://github.com/WordPress/gutenberg/pull/19679
 			it( 'url when escaped is still an actual link', () => {
 				const setAttributes = jest.fn();

package/src/navigation-submenu/edit.js

@@ -309,37 +309,33 @@ export default function NavigationSubmenuEdit( {
 		isTopLevelItem,
 		isParentOfSelectedBlock,
 		isImmediateParentOfSelectedBlock,
-		hasDescendants,
-		selectedBlockHasDescendants,
+		hasChildren,
+		selectedBlockHasChildren,
 		userCanCreatePages,
 		userCanCreatePosts,
 		onlyDescendantIsEmptyLink,
 	} = useSelect(
 		( select ) => {
 			const {
-				getClientIdsOfDescendants,
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
 				getBlockParentsByBlockName,
 				getBlock,
+				getBlockCount,
+				getBlockOrder,
 			} = select( blockEditorStore );
 
 			let _onlyDescendantIsEmptyLink;
 
 			const selectedBlockId = getSelectedBlockClientId();
 
-			const descendants = getClientIdsOfDescendants( [ clientId ] )
-				.length;
-
-			const selectedBlockDescendants = getClientIdsOfDescendants( [
-				selectedBlockId,
-			] );
+			const selectedBlockChildren = getBlockOrder( selectedBlockId );
 
 			// Check for a single descendant in the submenu. If that block
 			// is a link block in a "placeholder" state with no label then
 			// we can consider as an "empty" link.
-			if ( selectedBlockDescendants?.length === 1 ) {
-				const singleBlock = getBlock( selectedBlockDescendants[ 0 ] );
+			if ( selectedBlockChildren?.length === 1 ) {
+				const singleBlock = getBlock( selectedBlockChildren[ 0 ] );
 
 				_onlyDescendantIsEmptyLink =
 					singleBlock?.name === 'core/navigation-link' &&
@@ -360,8 +356,8 @@ export default function NavigationSubmenuEdit( {
 					clientId,
 					false
 				),
-				hasDescendants: !! descendants,
-				selectedBlockHasDescendants: !! selectedBlockDescendants?.length,
+				hasChildren: !! getBlockCount( clientId ),
+				selectedBlockHasChildren: !! selectedBlockChildren?.length,
 				userCanCreatePages: select( coreStore ).canUser(
 					'create',
 					'pages'
@@ -481,7 +477,7 @@ export default function NavigationSubmenuEdit( {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
-			'has-child': hasDescendants,
+			'has-child': hasChildren,
 			'has-text-color': !! textColor || !! customTextColor,
 			[ getColorClassName( 'color', textColor ) ]: !! textColor,
 			'has-background': !! backgroundColor || customBackgroundColor,
@@ -538,9 +534,9 @@ export default function NavigationSubmenuEdit( {
 			renderAppender:
 				isSelected ||
 				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasDescendants ) ||
+					! selectedBlockHasChildren ) ||
 				// Show the appender while dragging to allow inserting element between item and the appender.
-				hasDescendants
+				hasChildren
 					? InnerBlocks.ButtonBlockAppender
 					: false,
 		}
@@ -554,7 +550,7 @@ export default function NavigationSubmenuEdit( {
 	}
 
 	const canConvertToLink =
-		! selectedBlockHasDescendants || onlyDescendantIsEmptyLink;
+		! selectedBlockHasChildren || onlyDescendantIsEmptyLink;
 
 	return (
 		<Fragment>

package/src/page-list/convert-to-links-modal.js

@@ -4,7 +4,7 @@
 import { Button, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { __experimentalUseEntityRecords as useEntityRecords } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 import { createBlock as create } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 

package/src/page-list/edit.js

@@ -16,10 +16,7 @@ import { ToolbarButton, Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import {
-	store as coreStore,
-	__experimentalUseEntityRecords as useEntityRecords,
-} from '@wordpress/core-data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
 
 /**
  * Internal dependencies

package/src/paragraph/edit.js

@@ -23,6 +23,11 @@ import {
 import { createBlock } from '@wordpress/blocks';
 import { formatLtr } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import { useOnEnter } from './use-enter';
+
 const name = 'core/paragraph';
 
 function ParagraphRTLControl( { direction, setDirection } ) {
@@ -57,6 +62,7 @@ function ParagraphBlock( {
 	const { align, content, direction, dropCap, placeholder } = attributes;
 	const isDropCapFeatureEnabled = useSetting( 'typography.dropCap' );
 	const blockProps = useBlockProps( {
+		ref: useOnEnter( { clientId, content } ),
 		className: classnames( {
 			'has-drop-cap': dropCap,
 			[ `has-text-align-${ align }` ]: align,

package/src/paragraph/use-enter.js

@@ -0,0 +1,103 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { useRefEffect } from '@wordpress/compose';
+import { ENTER } from '@wordpress/keycodes';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { hasBlockSupport, createBlock } from '@wordpress/blocks';
+
+export function useOnEnter( props ) {
+	const { batch } = useRegistry();
+	const {
+		moveBlocksToPosition,
+		replaceInnerBlocks,
+		duplicateBlocks,
+		insertBlock,
+	} = useDispatch( blockEditorStore );
+	const {
+		getBlockRootClientId,
+		getBlockIndex,
+		getBlockOrder,
+		getBlockName,
+		getBlock,
+		getNextBlockClientId,
+	} = useSelect( blockEditorStore );
+	const propsRef = useRef( props );
+	propsRef.current = props;
+	return useRefEffect( ( element ) => {
+		function onKeyDown( event ) {
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
+			if ( event.keyCode !== ENTER ) {
+				return;
+			}
+
+			const { content, clientId } = propsRef.current;
+
+			// The paragraph should be empty.
+			if ( content.length ) {
+				return;
+			}
+
+			const wrapperClientId = getBlockRootClientId( clientId );
+
+			if (
+				! hasBlockSupport(
+					getBlockName( wrapperClientId ),
+					'__experimentalOnEnter',
+					false
+				)
+			) {
+				return;
+			}
+
+			const order = getBlockOrder( wrapperClientId );
+
+			event.preventDefault();
+
+			const position = order.indexOf( clientId );
+
+			// If it is the last block, exit.
+			if ( position === order.length - 1 ) {
+				moveBlocksToPosition(
+					[ clientId ],
+					wrapperClientId,
+					getBlockRootClientId( wrapperClientId ),
+					getBlockIndex( wrapperClientId ) + 1
+				);
+				return;
+			}
+
+			// If it is in the middle, split the block in two.
+			const wrapperBlock = getBlock( wrapperClientId );
+			batch( () => {
+				duplicateBlocks( [ wrapperClientId ] );
+				const blockIndex = getBlockIndex( wrapperClientId );
+
+				replaceInnerBlocks(
+					wrapperClientId,
+					wrapperBlock.innerBlocks.slice( 0, position )
+				);
+				replaceInnerBlocks(
+					getNextBlockClientId( wrapperClientId ),
+					wrapperBlock.innerBlocks.slice( position + 1 )
+				);
+				insertBlock(
+					createBlock( 'core/paragraph' ),
+					blockIndex + 1,
+					getBlockRootClientId( wrapperClientId ),
+					true
+				);
+			} );
+		}
+
+		element.addEventListener( 'keydown', onKeyDown );
+		return () => {
+			element.removeEventListener( 'keydown', onKeyDown );
+		};
+	}, [] );
+}

package/src/post-author/edit.js

@@ -70,28 +70,30 @@ function PostAuthorEdit( {
 		<>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
-					{ ! isDescendentOfQueryLoop && !! authors?.length && (
-						<SelectControl
-							label={ __( 'Author' ) }
-							value={ authorId }
-							options={ authors.map( ( { id, name } ) => {
-								return {
-									value: id,
-									label: name,
-								};
-							} ) }
-							onChange={ ( nextAuthorId ) => {
-								editEntityRecord(
-									'postType',
-									postType,
-									postId,
-									{
-										author: nextAuthorId,
-									}
-								);
-							} }
-						/>
-					) }
+					{ !! postId &&
+						! isDescendentOfQueryLoop &&
+						!! authors?.length && (
+							<SelectControl
+								label={ __( 'Author' ) }
+								value={ authorId }
+								options={ authors.map( ( { id, name } ) => {
+									return {
+										value: id,
+										label: name,
+									};
+								} ) }
+								onChange={ ( nextAuthorId ) => {
+									editEntityRecord(
+										'postType',
+										postType,
+										postId,
+										{
+											author: nextAuthorId,
+										}
+									);
+								} }
+							/>
+						) }
 					<ToggleControl
 						label={ __( 'Show avatar' ) }
 						checked={ showAvatar }

package/src/post-author/index.php

@@ -15,10 +15,11 @@
  */
 function render_block_core_post_author( $attributes, $content, $block ) {
 	if ( ! isset( $block->context['postId'] ) ) {
-		return '';
+		$author_id = get_query_var( 'author' );
+	} else {
+		$author_id = get_post_field( 'post_author', $block->context['postId'] );
 	}
 
-	$author_id = get_post_field( 'post_author', $block->context['postId'] );
 	if ( empty( $author_id ) ) {
 		return '';
 	}
@@ -39,7 +40,7 @@ function render_block_core_post_author( $attributes, $content, $block ) {
 	return sprintf( '<div %1$s>', $wrapper_attributes ) .
 	( ! empty( $attributes['showAvatar'] ) ? '<div class="wp-block-post-author__avatar">' . $avatar . '</div>' : '' ) .
 	'<div class="wp-block-post-author__content">' .
-	( ! empty( $byline ) ? '<p class="wp-block-post-author__byline">' . esc_html( $byline ) . '</p>' : '' ) .
+	( ! empty( $byline ) ? '<p class="wp-block-post-author__byline">' . wp_kses_post( $byline ) . '</p>' : '' ) .
 	'<p class="wp-block-post-author__name">' . get_the_author_meta( 'display_name', $author_id ) . '</p>' .
 	( ! empty( $attributes['showBio'] ) ? '<p class="wp-block-post-author__bio">' . get_the_author_meta( 'user_description', $author_id ) . '</p>' : '' ) .
 	'</div>' .

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

@@ -1,6 +1,7 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
+	"__experimental": true,
 	"name": "core/post-author-name",
 	"title": "Post Author Name",
 	"category": "theme",

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

@@ -3,6 +3,7 @@
  */
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 /**
  * WordPress dependencies
@@ -14,5 +15,6 @@ export { metadata, name };
 
 export const settings = {
 	icon,
+	transforms,
 	edit,
 };

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

@@ -32,7 +32,7 @@ function render_block_core_post_author_name( $attributes, $content, $block ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
-	return sprintf( '<div %1$s>', $wrapper_attributes ) . $author_name . '</div>';
+	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $author_name );
 }
 
 /**