@wordpress/block-library 7.4.0 → 7.5.0

package/src/latest-posts/edit.native.js

@@ -12,7 +12,10 @@ import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { postList as icon } from '@wordpress/icons';
-import { InspectorControls } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	BlockAlignmentControl,
+} from '@wordpress/block-editor';
 import apiFetch from '@wordpress/api-fetch';
 import {
 	Icon,
@@ -43,6 +46,15 @@ class LatestPostsEdit extends Component {
 		);
 		this.onSetExcerptLength = this.onSetExcerptLength.bind( this );
 		this.onSetDisplayPostDate = this.onSetDisplayPostDate.bind( this );
+		this.onSetDisplayFeaturedImage = this.onSetDisplayFeaturedImage.bind(
+			this
+		);
+		this.onSetFeaturedImageAlign = this.onSetFeaturedImageAlign.bind(
+			this
+		);
+		this.onSetAddLinkToFeaturedImage = this.onSetAddLinkToFeaturedImage.bind(
+			this
+		);
 		this.onSetOrder = this.onSetOrder.bind( this );
 		this.onSetOrderBy = this.onSetOrderBy.bind( this );
 		this.onSetPostsToShow = this.onSetPostsToShow.bind( this );
@@ -95,6 +107,21 @@ class LatestPostsEdit extends Component {
 		setAttributes( { displayPostDate: value } );
 	}
 
+	onSetDisplayFeaturedImage( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { displayFeaturedImage: value } );
+	}
+
+	onSetAddLinkToFeaturedImage( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { addLinkToFeaturedImage: value } );
+	}
+
+	onSetFeaturedImageAlign( value ) {
+		const { setAttributes } = this.props;
+		setAttributes( { featuredImageAlign: value } );
+	}
+
 	onSetOrder( value ) {
 		const { setAttributes } = this.props;
 		setAttributes( { order: value } );
@@ -124,6 +151,9 @@ class LatestPostsEdit extends Component {
 			displayPostContentRadio,
 			excerptLength,
 			displayPostDate,
+			displayFeaturedImage,
+			featuredImageAlign,
+			addLinkToFeaturedImage,
 			order,
 			orderBy,
 			postsToShow,
@@ -166,6 +196,31 @@ class LatestPostsEdit extends Component {
 						onChange={ this.onSetDisplayPostDate }
 					/>
 				</PanelBody>
+
+				<PanelBody title={ __( 'Featured image settings' ) }>
+					<ToggleControl
+						label={ __( 'Display featured image' ) }
+						checked={ displayFeaturedImage }
+						onChange={ this.onSetDisplayFeaturedImage }
+					/>
+					{ displayFeaturedImage && (
+						<>
+							<BlockAlignmentControl
+								value={ featuredImageAlign }
+								onChange={ this.onSetFeaturedImageAlign }
+								controls={ [ 'left', 'center', 'right' ] }
+								isBottomSheetControl={ true }
+							/>
+							<ToggleControl
+								label={ __( 'Add link to featured image' ) }
+								checked={ addLinkToFeaturedImage }
+								onChange={ this.onSetAddLinkToFeaturedImage }
+								separatorType={ 'topFullWidth' }
+							/>
+						</>
+					) }
+				</PanelBody>
+
 				<PanelBody title={ __( 'Sorting and filtering' ) }>
 					<QueryControls
 						{ ...{ order, orderBy } }

package/src/latest-posts/style.scss

@@ -63,10 +63,14 @@
 	&.alignleft {
 		/*rtl:ignore*/
 		margin-right: 1em;
+		/*rtl:ignore*/
+		float: left;
 	}
 	&.alignright {
 		/*rtl:ignore*/
 		margin-left: 1em;
+		/*rtl:ignore*/
+		float: right;
 	}
 	&.aligncenter {
 		margin-bottom: 1em;

package/src/navigation/block.json

@@ -65,7 +65,6 @@
 			"default": 5
 		}
 	},
-	"usesContext": [ "navigationArea" ],
 	"providesContext": {
 		"textColor": "textColor",
 		"customTextColor": "customTextColor",

package/src/navigation/edit/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -26,7 +25,7 @@ import {
 	getColorClassName,
 	Warning,
 } from '@wordpress/block-editor';
-import { EntityProvider, useEntityProp } from '@wordpress/core-data';
+import { EntityProvider } from '@wordpress/core-data';
 
 import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import {
@@ -109,7 +108,6 @@ function Navigation( {
 	setOverlayBackgroundColor,
 	overlayTextColor,
 	setOverlayTextColor,
-	context: { navigationArea },
 
 	// These props are used by the navigation editor to override specific
 	// navigation block settings.
@@ -129,34 +127,12 @@ function Navigation( {
 		hasIcon,
 	} = attributes;
 
-	let areaMenu,
-		setAreaMenu = noop;
-	// Navigation areas are deprecated and on their way out. Let's not perform
-	// the request unless we're in an environment where the endpoint exists.
-	if ( process.env.IS_GUTENBERG_PLUGIN ) {
-		// eslint-disable-next-line react-hooks/rules-of-hooks
-		[ areaMenu, setAreaMenu ] = useEntityProp(
-			'root',
-			'navigationArea',
-			'navigation',
-			navigationArea
-		);
-	}
-
-	const navigationAreaMenu = areaMenu === 0 ? undefined : areaMenu;
-
-	const ref = navigationArea ? navigationAreaMenu : attributes.ref;
+	const ref = attributes.ref;
 
 	const registry = useRegistry();
-	const setRef = useCallback(
-		( postId ) => {
-			setAttributes( { ref: postId } );
-			if ( navigationArea ) {
-				setAreaMenu( postId );
-			}
-		},
-		[ navigationArea ]
-	);
+	const setRef = ( postId ) => {
+		setAttributes( { ref: postId } );
+	};
 
 	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
 		`navigationMenu/${ ref }`
@@ -261,8 +237,6 @@ function Navigation( {
 		setHasSavedUnsavedInnerBlocks,
 	] = useState( false );
 
-	const isWithinUnassignedArea = !! navigationArea && ! ref;
-
 	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = useState(
 		false
 	);
@@ -322,13 +296,12 @@ function Navigation( {
 	// - there is no classic menu conversion process in progress.
 	// - there is no menu creation process in progress.
 	// - there are no uncontrolled blocks.
-	// - (legacy) there is a Navigation Area without a ref attribute pointing to a Navigation Post.
 	const isPlaceholder =
 		! ref &&
 		! isCreatingNavigationMenu &&
 		! isConvertingClassicMenu &&
 		hasResolvedNavigationMenus &&
-		( ! hasUncontrolledInnerBlocks || isWithinUnassignedArea );
+		! hasUncontrolledInnerBlocks;
 
 	const isEntityAvailable =
 		! isNavigationMenuMissing && isNavigationMenuResolved;
@@ -567,9 +540,6 @@ function Navigation( {
 
 	const resetToEmptyBlock = useCallback( () => {
 		registry.batch( () => {
-			if ( navigationArea ) {
-				setAreaMenu( 0 );
-			}
 			setAttributes( {
 				ref: undefined,
 			} );

package/src/navigation/edit/inner-blocks.js

@@ -44,12 +44,12 @@ export default function NavigationInnerBlocks( {
 } ) {
 	const {
 		isImmediateParentOfSelectedBlock,
-		selectedBlockHasDescendants,
+		selectedBlockHasChildren,
 		isSelected,
 	} = useSelect(
 		( select ) => {
 			const {
-				getClientIdsOfDescendants,
+				getBlockCount,
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
 			} = select( blockEditorStore );
@@ -60,9 +60,7 @@ export default function NavigationInnerBlocks( {
 					clientId,
 					false
 				),
-				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
-					selectedBlockId,
-				] )?.length,
+				selectedBlockHasChildren: !! getBlockCount( selectedBlockId ),
 
 				// This prop is already available but computing it here ensures it's
 				// fresh compared to isImmediateParentOfSelectedBlock.
@@ -93,7 +91,7 @@ export default function NavigationInnerBlocks( {
 	// appender.
 	const parentOrChildHasSelection =
 		isSelected ||
-		( isImmediateParentOfSelectedBlock && ! selectedBlockHasDescendants );
+		( isImmediateParentOfSelectedBlock && ! selectedBlockHasChildren );
 
 	const placeholder = useMemo( () => <PlaceholderPreview />, [] );
 
@@ -127,7 +125,7 @@ export default function NavigationInnerBlocks( {
 			renderAppender:
 				isSelected ||
 				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasDescendants ) ||
+					! selectedBlockHasChildren ) ||
 				// Show the appender while dragging to allow inserting element between item and the appender.
 				parentOrChildHasSelection
 					? InnerBlocks.ButtonBlockAppender

package/src/navigation/style.scss

@@ -299,6 +299,9 @@ button.wp-block-navigation-item__content {
 	font-size: inherit;
 	font-family: inherit;
 	line-height: inherit;
+	font-style: inherit;
+	font-weight: inherit;
+	text-transform: inherit;
 
 	// Buttons default to center alignment. This becomes visible
 	// when a menu item label is long enough to wrap.

package/src/navigation/view-modal.js

@@ -33,4 +33,36 @@ window.addEventListener( 'load', () => {
 		onClose: navigationToggleModal,
 		openClass: 'is-menu-open',
 	} );
+
+	// Close modal automatically on clicking anchor links inside modal.
+	const navigationLinks = document.querySelectorAll(
+		'.wp-block-navigation-item__content'
+	);
+
+	navigationLinks.forEach( function ( link ) {
+		// Ignore non-anchor links and anchor links which open on a new tab.
+		if (
+			! link.getAttribute( 'href' )?.startsWith( '#' ) ||
+			link.attributes?.target === '_blank'
+		) {
+			return;
+		}
+
+		// Find the specific parent modal for this link
+		// since .close() won't work without an ID if there are
+		// multiple navigation menus in a post/page.
+		const modal = link.closest(
+			'.wp-block-navigation__responsive-container'
+		);
+		const modalId = modal?.getAttribute( 'id' );
+
+		link.addEventListener( 'click', () => {
+			// check if modal exists and is open before trying to close it
+			// otherwise Micromodal will toggle the `has-modal-open` class
+			// on the html tag which prevents scrolling
+			if ( modalId && modal.classList.contains( 'has-modal-open' ) ) {
+				MicroModal.close( modalId );
+			}
+		} );
+	} );
 } );

package/src/navigation-link/edit.js

@@ -342,7 +342,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 +387,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 +452,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 +480,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 +489,6 @@ export default function NavigationLinkEdit( {
 					'create',
 					'posts'
 				),
-				thisBlock: getBlock( clientId ),
-				blockTransforms: getBlockTransformItems(
-					[ getBlock( clientId ) ],
-					getBlockRootClientId( clientId )
-				),
 			};
 		},
 		[ clientId ]
@@ -506,15 +515,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 +524,7 @@ export default function NavigationLinkEdit( {
 			setIsLinkOpen( true );
 		}
 		// If block has inner blocks, transform to Submenu.
-		if ( hasDescendants ) {
+		if ( hasChildren ) {
 			transformToSubmenu();
 		}
 	}, [] );
@@ -634,7 +634,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,
@@ -860,10 +860,7 @@ export default function NavigationLinkEdit( {
 									! url
 										? () => (
 												<LinkControlTransforms
-													block={ thisBlock }
-													transforms={
-														featuredTransforms
-													}
+													clientId={ clientId }
 													replace={ replaceBlock }
 												/>
 										  )

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/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/index.php

@@ -39,7 +39,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-comment/block.json

@@ -4,7 +4,7 @@
 	"name": "core/post-comment",
 	"title": "Post Comment (deprecated)",
 	"category": "theme",
-	"description": "This block is deprecated. Please use the Comments Query Loop block instead.",
+	"description": "This block is deprecated. Please use the Comments block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"commentId": {