@wordpress/block-library 7.3.0 → 7.4.0

package/src/index.js

@@ -35,6 +35,7 @@ import * as commentsQueryLoop from './comments-query-loop';
 import * as commentsPagination from './comments-pagination';
 import * as commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
+import * as commentsTitle from './comments-title';
 import * as cover from './cover';
 import * as embed from './embed';
 import * as file from './file';
@@ -138,7 +139,6 @@ export const __experimentalGetCoreBlocks = () => [
 	heading,
 	gallery,
 	list,
-	listItem,
 	quote,
 
 	// Register all remaining core blocks.
@@ -213,11 +213,13 @@ export const __experimentalGetCoreBlocks = () => [
 	commentEditLink,
 	commentReplyLink,
 	commentTemplate,
+	commentsTitle,
 	commentsQueryLoop,
 	commentsPagination,
 	commentsPaginationNext,
 	commentsPaginationNumbers,
 	commentsPaginationPrevious,
+
 	postComments,
 	homeLink,
 	logInOut,
@@ -268,6 +270,10 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 			[
 				// Experimental blocks.
 				postAuthorName,
+				...( window.__experimentalEnableListBlockV2
+					? [ listItem ]
+					: [] ),
+
 				// Full Site Editing blocks.
 				...( enableFSEBlocks
 					? [

package/src/index.native.js

@@ -179,6 +179,14 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
 	Platform.OS === 'ios' ? block : devOnly( block );
 
+// To be removed once Quote V2 is released on the web editor.
+function quoteCheck( quoteBlock, blocksFlags ) {
+	if ( blocksFlags?.__experimentalEnableQuoteBlockV2 ) {
+		quoteBlock.settings = quoteBlock?.settingsV2;
+	}
+	return quoteBlock;
+}
+
 // Hide the Classic block and SocialLink block
 addFilter(
 	'blocks.registerBlockType',
@@ -230,8 +238,10 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
+ * @param {Object} [blocksFlags] Experimental flags
+ *
  */
-export const registerCoreBlocks = () => {
+export const registerCoreBlocks = ( blocksFlags ) => {
 	// When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
 	[
 		paragraph,
@@ -244,7 +254,7 @@ export const registerCoreBlocks = () => {
 		nextpage,
 		separator,
 		list,
-		quote,
+		quoteCheck( quote, blocksFlags ),
 		mediaText,
 		preformatted,
 		gallery,

package/src/latest-comments/edit.js

@@ -35,7 +35,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
-				<PanelBody title={ __( 'Latest comments settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Display avatar' ) }
 						checked={ displayAvatar }

package/src/list/index.js

@@ -43,6 +43,10 @@ const settingsV1 = {
 	deprecated,
 };
 
-export const settings = window?.__experimentalEnableListBlockV2
-	? settingsV2
-	: settingsV1;
+let settings = settingsV1;
+if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	settings = window?.__experimentalEnableListBlockV2
+		? settingsV2
+		: settingsV1;
+}
+export { settings };

package/src/loginout/edit.js

@@ -11,7 +11,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Login/out settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Display login as form' ) }
 						checked={ displayLoginAsForm }

package/src/media-text/edit.js

@@ -46,7 +46,6 @@ const TEMPLATE = [
 	[
 		'core/paragraph',
 		{
-			fontSize: 'large',
 			placeholder: _x( 'Content…', 'content placeholder' ),
 		},
 	],
@@ -238,7 +237,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes } ) {
 	};
 
 	const mediaTextGeneralSettings = (
-		<PanelBody title={ __( 'Media & Text settings' ) }>
+		<PanelBody title={ __( 'Settings' ) }>
 			<ToggleControl
 				label={ __( 'Stack on mobile' ) }
 				checked={ isStackedOnMobile }

package/src/media-text/edit.native.js

@@ -186,7 +186,7 @@ class MediaTextEdit extends Component {
 
 		return (
 			<InspectorControls>
-				<PanelBody title={ __( 'Media & Text settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Crop image to fill entire column' ) }
 						checked={ imageFill }

package/src/navigation/block.json

@@ -117,7 +117,7 @@
 			}
 		}
 	},
-	"viewScript": "file:./view.min.js",
+	"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"
 }

package/src/navigation/edit/index.js

@@ -523,6 +523,11 @@ function Navigation( {
 		ref,
 	] );
 
+	const navigationSelectorRef = useRef();
+	const [
+		shouldFocusNavigationSelector,
+		setShouldFocusNavigationSelector,
+	] = useState( false );
 	const handleSelectNavigation = useCallback(
 		( navPostOrClassicMenu ) => {
 			if ( ! navPostOrClassicMenu ) {
@@ -538,10 +543,28 @@ function Navigation( {
 			} else {
 				handleUpdateMenu( navPostOrClassicMenu.id );
 			}
+			setShouldFocusNavigationSelector( true );
 		},
 		[ convert, handleUpdateMenu ]
 	);
 
+	// Focus support after menu selection.
+	useEffect( () => {
+		if (
+			isDraftNavigationMenu ||
+			! isEntityAvailable ||
+			! shouldFocusNavigationSelector
+		) {
+			return;
+		}
+		navigationSelectorRef?.current?.focus();
+		setShouldFocusNavigationSelector( false );
+	}, [
+		isDraftNavigationMenu,
+		isEntityAvailable,
+		shouldFocusNavigationSelector,
+	] );
+
 	const resetToEmptyBlock = useCallback( () => {
 		registry.batch( () => {
 			if ( navigationArea ) {
@@ -663,6 +686,7 @@ function Navigation( {
 					{ ! isDraftNavigationMenu && isEntityAvailable && (
 						<ToolbarGroup className="wp-block-navigation__toolbar-menu-selector">
 							<NavigationMenuSelector
+								ref={ navigationSelectorRef }
 								currentMenuId={ ref }
 								clientId={ clientId }
 								onSelect={ handleSelectNavigation }

package/src/navigation/edit/navigation-menu-selector.js

@@ -10,7 +10,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
-import { useCallback, useMemo } from '@wordpress/element';
+import { forwardRef, useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,14 +18,17 @@ import { useCallback, useMemo } from '@wordpress/element';
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 
-export default function NavigationMenuSelector( {
-	currentMenuId,
-	onSelect,
-	onCreateNew,
-	showManageActions = false,
-	actionLabel,
-	toggleProps = {},
-} ) {
+function NavigationMenuSelector(
+	{
+		currentMenuId,
+		onSelect,
+		onCreateNew,
+		showManageActions = false,
+		actionLabel,
+		toggleProps = {},
+	},
+	forwardedRef
+) {
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -92,6 +95,7 @@ export default function NavigationMenuSelector( {
 
 	return (
 		<ToolbarDropdownMenu
+			ref={ forwardedRef }
 			label={ __( 'Select Menu' ) }
 			text={ __( 'Select Menu' ) }
 			icon={ null }
@@ -152,3 +156,5 @@ export default function NavigationMenuSelector( {
 		</ToolbarDropdownMenu>
 	);
 }
+
+export default forwardRef( NavigationMenuSelector );

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

@@ -123,7 +123,7 @@ export default function UnsavedInnerBlocks( {
 	);
 
 	// Automatically save the uncontrolled blocks.
-	useEffect( async () => {
+	useEffect( () => {
 		// The block will be disabled when used in a BlockPreview.
 		// In this case avoid automatic creation of a wp_navigation post.
 		// Otherwise the user will be spammed with lots of menus!
@@ -150,9 +150,10 @@ export default function UnsavedInnerBlocks( {
 		}
 
 		savingLock.current = true;
-		const menu = await createNavigationMenu( null, blocks );
-		onSave( menu );
-		savingLock.current = false;
+		createNavigationMenu( null, blocks ).then( ( menu ) => {
+			onSave( menu );
+			savingLock.current = false;
+		} );
 	}, [
 		isDisabled,
 		isSaving,

package/src/navigation/index.php

@@ -396,6 +396,11 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}
 
+	$should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'];
+	if ( $should_load_modal_view_script ) {
+		wp_enqueue_script( 'wp-block-navigation-view-modal' );
+	}
+
 	$inner_blocks = $block->inner_blocks;
 
 	// Ensure that blocks saved with the legacy ref attribute name (navigationMenuId) continue to render.

package/src/navigation/view-modal.js

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import MicroModal from 'micromodal';
+
+// Responsive navigation toggle.
+function navigationToggleModal( modal ) {
+	const dialogContainer = modal.querySelector(
+		`.wp-block-navigation__responsive-dialog`
+	);
+
+	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
+
+	modal.classList.toggle( 'has-modal-open', ! isHidden );
+	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
+
+	if ( isHidden ) {
+		dialogContainer.removeAttribute( 'role' );
+		dialogContainer.removeAttribute( 'aria-modal' );
+	} else {
+		dialogContainer.setAttribute( 'role', 'dialog' );
+		dialogContainer.setAttribute( 'aria-modal', 'true' );
+	}
+
+	// Add a class to indicate the modal is open.
+	const htmlElement = document.documentElement;
+	htmlElement.classList.toggle( 'has-modal-open' );
+}
+
+window.addEventListener( 'load', () => {
+	MicroModal.init( {
+		onShow: navigationToggleModal,
+		onClose: navigationToggleModal,
+		openClass: 'is-menu-open',
+	} );
+} );

package/src/navigation/view.js

@@ -1,32 +1,3 @@
-/**
- * External dependencies
- */
-import MicroModal from 'micromodal';
-
-// Responsive navigation toggle.
-function navigationToggleModal( modal ) {
-	const dialogContainer = modal.querySelector(
-		`.wp-block-navigation__responsive-dialog`
-	);
-
-	const isHidden = 'true' === modal.getAttribute( 'aria-hidden' );
-
-	modal.classList.toggle( 'has-modal-open', ! isHidden );
-	dialogContainer.toggleAttribute( 'aria-modal', ! isHidden );
-
-	if ( isHidden ) {
-		dialogContainer.removeAttribute( 'role' );
-		dialogContainer.removeAttribute( 'aria-modal' );
-	} else {
-		dialogContainer.setAttribute( 'role', 'dialog' );
-		dialogContainer.setAttribute( 'aria-modal', 'true' );
-	}
-
-	// Add a class to indicate the modal is open.
-	const htmlElement = document.documentElement;
-	htmlElement.classList.toggle( 'has-modal-open' );
-}
-
 // Open on click functionality.
 function closeSubmenus( element ) {
 	element
@@ -65,12 +36,6 @@ function toggleSubmenuOnClick( event ) {
 // Necessary for some themes such as TT1 Blocks, where
 // scripts could be loaded before the body.
 window.addEventListener( 'load', () => {
-	MicroModal.init( {
-		onShow: navigationToggleModal,
-		onClose: navigationToggleModal,
-		openClass: 'is-menu-open',
-	} );
-
 	const submenuButtons = document.querySelectorAll(
 		'.wp-block-navigation-submenu__toggle'
 	);

package/src/paragraph/edit.native.js

@@ -14,6 +14,8 @@ import { useSelect } from '@wordpress/data';
 
 const name = 'core/paragraph';
 
+const allowedParentBlockAlignments = [ 'left', 'center', 'right' ];
+
 function ParagraphBlock( {
 	attributes,
 	mergeBlocks,
@@ -21,6 +23,7 @@ function ParagraphBlock( {
 	setAttributes,
 	style,
 	clientId,
+	parentBlockAlignment,
 } ) {
 	const isRTL = useSelect( ( select ) => {
 		return !! select( blockEditorStore ).getSettings().isRTL;
@@ -40,6 +43,15 @@ function ParagraphBlock( {
 	const onAlignmentChange = useCallback( ( nextAlign ) => {
 		setAttributes( { align: nextAlign } );
 	}, [] );
+
+	const parentTextAlignment = allowedParentBlockAlignments.includes(
+		parentBlockAlignment
+	)
+		? parentBlockAlignment
+		: undefined;
+
+	const textAlignment = align || parentTextAlignment;
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -82,7 +94,7 @@ function ParagraphBlock( {
 				onReplace={ onReplace }
 				onRemove={ onReplace ? () => onReplace( [] ) : undefined }
 				placeholder={ placeholder || __( 'Start writing…' ) }
-				textAlign={ align }
+				textAlign={ textAlignment }
 				__unstableEmbedURLOnPaste
 			/>
 		</>

package/src/post-author/edit.js

@@ -69,7 +69,7 @@ function PostAuthorEdit( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Author Settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ ! isDescendentOfQueryLoop && !! authors?.length && (
 						<SelectControl
 							label={ __( 'Author' ) }

package/src/post-comments/block.json

@@ -2,9 +2,9 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-comments",
-	"title": "Post Comments",
+	"title": "Post Comments (deprecated)",
 	"category": "theme",
-	"description": "Display a post's comments.",
+	"description": "This block is deprecated. Please use the Comments Query Loop block instead.",
 	"textdomain": "default",
 	"attributes": {
 		"textAlign": {
@@ -33,7 +33,8 @@
 				"background": true,
 				"text": true
 			}
-		}
+		},
+		"inserter": false
 	},
 	"style": [
 		"wp-block-post-comments",

package/src/post-comments-form/index.php

@@ -18,20 +18,28 @@ function render_block_core_post_comments_form( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$classes = '';
+	$classes = 'comment-respond'; // See comment further below.
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= 'has-text-align-' . $attributes['textAlign'];
 	}
 
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+
 	ob_start();
 	comment_form( array(), $block->context['postId'] );
-	$form               = ob_get_clean();
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$form = ob_get_clean();
+
+	// We use the outermost wrapping `<div />` returned by `comment_form()`
+	// which is identified by its default classname `comment-respond` to inject
+	// our wrapper attributes. This way, it is guaranteed that all styling applied
+	// to the block is carried along when the comment form is moved to the location
+	// of the 'Reply' link that the user clicked by Core's `comment-reply.js` script.
+	$form = str_replace( 'class="comment-respond"', $wrapper_attributes, $form );
 
 	// Enqueue the comment-reply script.
 	wp_enqueue_script( 'comment-reply' );
 
-	return sprintf( '<div %1$s>%2$s</div>', $wrapper_attributes, $form );
+	return $form;
 }
 
 /**

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

@@ -67,4 +67,15 @@
 			margin-top: 0.35em;
 		}
 	}
+
+	.comment-reply-title {
+		align-items: baseline;
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 0;
+
+		:where(small) {
+			font-size: var(--wp--preset--font-size--medium, smaller);
+		}
+	}
 }

package/src/post-excerpt/edit.js

@@ -114,7 +114,7 @@ export default function PostExcerptEditor( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Post Excerpt Settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
 						label={ __( 'Show link on new line' ) }
 						checked={ showMoreOnNewLine }

package/src/post-featured-image/edit.js

@@ -57,22 +57,30 @@ function PostFeaturedImageDisplay( {
 	clientId,
 	attributes,
 	setAttributes,
-	context: { postId, postType, queryId },
+	context: { postId, postType: postTypeSlug, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const { isLink, height, width, scale, sizeSlug } = attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
-		postType,
+		postTypeSlug,
 		'featured_media',
 		postId
 	);
 
-	const media = useSelect(
-		( select ) =>
-			featuredImage &&
-			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
-		[ featuredImage ]
+	const { media, postType } = useSelect(
+		( select ) => {
+			const { getMedia, getPostType } = select( coreStore );
+			return {
+				media:
+					featuredImage &&
+					getMedia( featuredImage, {
+						context: 'view',
+					} ),
+				postType: postTypeSlug && getPostType( postTypeSlug ),
+			};
+		},
+		[ featuredImage, postTypeSlug ]
 	);
 	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
 
@@ -124,11 +132,15 @@ function PostFeaturedImageDisplay( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
-						label={ sprintf(
-							// translators: %s: Name of the post type e.g: "post".
-							__( 'Link to %s' ),
-							postType
-						) }
+						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 }
 					/>