@wordpress/block-library 8.3.6 → 8.5.0

package/src/latest-comments/edit.js

@@ -28,11 +28,20 @@ export default function LatestComments( { attributes, setAttributes } ) {
 	const { commentsToShow, displayAvatar, displayDate, displayExcerpt } =
 		attributes;
 
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			spacing: undefined,
+		},
+	};
+
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display avatar' ) }
 						checked={ displayAvatar }
 						onChange={ () =>
@@ -40,6 +49,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display date' ) }
 						checked={ displayDate }
 						onChange={ () =>
@@ -47,6 +57,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display excerpt' ) }
 						checked={ displayExcerpt }
 						onChange={ () =>
@@ -71,8 +82,7 @@ export default function LatestComments( { attributes, setAttributes } ) {
 			<Disabled>
 				<ServerSideRender
 					block="core/latest-comments"
-					attributes={ attributes }
-					skipBlockSupportAttributes
+					attributes={ serverSideAttributes }
 					// The preview uses the site's locale to make it more true to how
 					// the block appears on the frontend. Setting the locale
 					// explicitly prevents any middleware from setting it to 'user'.

package/src/latest-comments/style.scss

@@ -9,6 +9,23 @@ ol.wp-block-latest-comments {
 	box-sizing: border-box;
 }
 
+// Following styles leverage :where so that typography block support styles and
+// global styles apply when necessary.
+:where(.wp-block-latest-comments:not([style*="line-height"] .wp-block-latest-comments__comment)) {
+	line-height: 1.1;
+}
+
+:where(.wp-block-latest-comments:not([style*="line-height"] .wp-block-latest-comments__comment-excerpt p)) {
+	line-height: 1.8;
+}
+
+.has-dates,
+.has-excerpts {
+	:where(.wp-block-latest-comments:not([style*="line-height"])) {
+		line-height: 1.5;
+	}
+}
+
 // Higher specificity - target list via wrapper.
 .wp-block-latest-comments .wp-block-latest-comments {
 	// Remove left spacing. Higher specificity required to
@@ -17,7 +34,6 @@ ol.wp-block-latest-comments {
 }
 
 .wp-block-latest-comments__comment {
-	line-height: 1.1;
 	list-style: none;
 	margin-bottom: 1em;
 
@@ -30,16 +46,10 @@ ol.wp-block-latest-comments {
 			margin-left: 3.25em;
 		}
 	}
-
-	.has-dates &,
-	.has-excerpts & {
-		line-height: 1.5;
-	}
 }
 
 .wp-block-latest-comments__comment-excerpt p {
 	font-size: 0.875em;
-	line-height: 1.8;
 	margin: 0.36em 0 1.4em;
 }
 
@@ -57,3 +67,11 @@ ol.wp-block-latest-comments {
 	margin-right: 0.75em;
 	width: 2.5em;
 }
+
+// Enforce font size when user has made selection at the individual block level.
+.wp-block-latest-comments[style*="font-size"],
+.wp-block-latest-comments[class*="-font-size"] {
+	a {
+		font-size: inherit;
+	}
+}

package/src/latest-posts/block.json

@@ -84,6 +84,7 @@
 	},
 	"supports": {
 		"align": true,
+		"anchor": true,
 		"html": false,
 		"color": {
 			"gradients": true,

package/src/latest-posts/edit.js

@@ -247,6 +247,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 			<PanelBody title={ __( 'Post meta settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display author name' ) }
 					checked={ displayAuthor }
 					onChange={ ( value ) =>
@@ -254,6 +255,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 					}
 				/>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display post date' ) }
 					checked={ displayPostDate }
 					onChange={ ( value ) =>
@@ -264,6 +266,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 
 			<PanelBody title={ __( 'Featured image settings' ) }>
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Display featured image' ) }
 					checked={ displayFeaturedImage }
 					onChange={ ( value ) =>
@@ -315,6 +318,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							/>
 						</BaseControl>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Add link to featured image' ) }
 							checked={ addLinkToFeaturedImage }
 							onChange={ ( value ) =>

package/src/list/ordered-list-settings.js

@@ -25,6 +25,7 @@ const OrderedListSettings = ( { setAttributes, reversed, start } ) => (
 				step="1"
 			/>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Reverse list numbering' ) }
 				checked={ reversed || false }
 				onChange={ ( value ) => {

package/src/list/test/__snapshots__/edit.native.js.snap

@@ -21,7 +21,7 @@ exports[`List block changes the indentation level 1`] = `
 `;
 
 exports[`List block changes to ordered list 1`] = `
-"<!-- wp:list {\\"ordered\\":true} -->
+"<!-- wp:list {"ordered":true} -->
 <ol><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
@@ -37,7 +37,7 @@ exports[`List block changes to ordered list 1`] = `
 `;
 
 exports[`List block changes to reverse ordered list 1`] = `
-"<!-- wp:list {\\"ordered\\":true,\\"reversed\\":true} -->
+"<!-- wp:list {"ordered":true,"reversed":true} -->
 <ol reversed><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
@@ -73,8 +73,8 @@ exports[`List block removes the indentation level 1`] = `
 `;
 
 exports[`List block sets a start value to an ordered list 1`] = `
-"<!-- wp:list {\\"ordered\\":true,\\"start\\":25} -->
-<ol start=\\"25\\"><!-- wp:list-item -->
+"<!-- wp:list {"ordered":true,"start":25} -->
+<ol start="25"><!-- wp:list-item -->
 <li>Item 1</li>
 <!-- /wp:list-item -->
 

package/src/list-item/edit.js

@@ -88,9 +88,16 @@ export default function ListItemEdit( {
 					placeholder={ placeholder || __( 'List' ) }
 					onSplit={ onSplit }
 					onMerge={ onMerge }
-					onReplace={ ( blocks, ...args ) => {
-						onReplace( convertToListItems( blocks ), ...args );
-					} }
+					onReplace={
+						onReplace
+							? ( blocks, ...args ) => {
+									onReplace(
+										convertToListItems( blocks ),
+										...args
+									);
+							  }
+							: undefined
+					}
 				/>
 				{ innerBlocksProps.children }
 			</li>

package/src/list-item/hooks/use-outdent-list-item.js

@@ -112,7 +112,8 @@ export default function useOutdentListItem( clientId ) {
 					getBlockIndex( parentListItemId ) + 1
 				);
 				if ( ! getBlockOrder( parentListId ).length ) {
-					removeBlock( parentListId );
+					const shouldSelectParent = false;
+					removeBlock( parentListId, shouldSelectParent );
 				}
 			} );
 		}, [] ),

package/src/loginout/block.json

@@ -18,6 +18,7 @@
 		}
 	},
 	"supports": {
+		"anchor": true,
 		"className": true,
 		"typography": {
 			"fontSize": false

package/src/loginout/edit.js

@@ -13,6 +13,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display login as form' ) }
 						checked={ displayLoginAsForm }
 						onChange={ () =>
@@ -22,6 +23,7 @@ export default function LoginOutEdit( { attributes, setAttributes } ) {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Redirect to current URL' ) }
 						checked={ redirectToCurrent }
 						onChange={ () =>

package/src/media-text/edit.js

@@ -243,6 +243,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 	const mediaTextGeneralSettings = (
 		<PanelBody title={ __( 'Settings' ) }>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Stack on mobile' ) }
 				checked={ isStackedOnMobile }
 				onChange={ () =>
@@ -253,6 +254,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			/>
 			{ mediaType === 'image' && (
 				<ToggleControl
+					__nextHasNoMarginBottom
 					label={ __( 'Crop image to fill entire column' ) }
 					checked={ imageFill }
 					onChange={ () =>

package/src/missing/test/__snapshots__/edit.native.js.snap

@@ -6,7 +6,7 @@ exports[`Missing block renders without crashing 1`] = `
   accessibilityLabel="Help button"
   accessibilityRole="button"
   accessibilityState={
-    Object {
+    {
       "disabled": true,
     }
   }

package/src/more/edit.js

@@ -43,6 +43,7 @@ export default function MoreEdit( {
 			<InspectorControls>
 				<PanelBody>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __(
 							'Hide the excerpt on the full content page'
 						) }

package/src/navigation/block.json

@@ -92,6 +92,7 @@
 	},
 	"supports": {
 		"align": [ "wide", "full" ],
+		"anchor": true,
 		"html": false,
 		"inserter": true,
 		"typography": {

package/src/navigation/edit/index.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
+	useCallback,
 	useState,
 	useEffect,
 	useRef,
@@ -40,7 +41,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockType } from '@wordpress/blocks';
 import { close, Icon } from '@wordpress/icons';
 
 /**
@@ -148,34 +149,6 @@ function Navigation( {
 		createNavigationMenu( '' );
 	};
 
-	useEffect( () => {
-		hideNavigationMenuStatusNotice();
-
-		if ( isCreatingNavigationMenu ) {
-			speak( __( `Creating Navigation Menu.` ) );
-		}
-
-		if ( createNavigationMenuIsSuccess ) {
-			handleUpdateMenu( createNavigationMenuPost.id, {
-				focusNavigationBlock: true,
-			} );
-
-			showNavigationMenuStatusNotice(
-				__( `Navigation Menu successfully created.` )
-			);
-		}
-
-		if ( createNavigationMenuIsError ) {
-			showNavigationMenuStatusNotice(
-				__( 'Failed to create Navigation Menu.' )
-			);
-		}
-	}, [
-		createNavigationMenuStatus,
-		createNavigationMenuError,
-		createNavigationMenuPost,
-	] );
-
 	const {
 		hasUncontrolledInnerBlocks,
 		uncontrolledInnerBlocks,
@@ -237,6 +210,40 @@ function Navigation( {
 		[ navigationMenus ]
 	);
 
+	// This useEffect adds snackbar and speak status notices when menus are created.
+	// If there are no fallback navigation menus then we don't show these messages,
+	// because this means that we are creating the first, fallback navigation menu.
+	useEffect( () => {
+		hideNavigationMenuStatusNotice();
+
+		if ( fallbackNavigationMenus && isCreatingNavigationMenu ) {
+			speak( __( `Creating Navigation Menu.` ) );
+		}
+
+		if ( createNavigationMenuIsSuccess ) {
+			handleUpdateMenu( createNavigationMenuPost.id, {
+				focusNavigationBlock: true,
+			} );
+
+			if ( fallbackNavigationMenus ) {
+				showNavigationMenuStatusNotice(
+					__( `Navigation Menu successfully created.` )
+				);
+			}
+		}
+
+		if ( createNavigationMenuIsError ) {
+			showNavigationMenuStatusNotice(
+				__( 'Failed to create Navigation Menu.' )
+			);
+		}
+	}, [
+		createNavigationMenuStatus,
+		createNavigationMenuError,
+		createNavigationMenuPost,
+		fallbackNavigationMenus,
+	] );
+
 	// Attempt to retrieve and prioritize any existing navigation menu unless:
 	// - the are uncontrolled inner blocks already present in the block.
 	// - the user is creating a new menu.
@@ -270,12 +277,24 @@ function Navigation( {
 		hasUncontrolledInnerBlocks,
 	] );
 
+	const isEntityAvailable =
+		! isNavigationMenuMissing && isNavigationMenuResolved;
+
+	// If the block has inner blocks, but no menu id, then these blocks are either:
+	// - inserted via a pattern.
+	// - inserted directly via Code View (or otherwise).
+	// - from an older version of navigation block added before the block used a wp_navigation entity.
+	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
+	// that automatically saves the menu as an entity when changes are made to the inner blocks.
+	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
+
 	useEffect( () => {
 		if (
+			ref ||
 			! hasResolvedNavigationMenus ||
 			isConvertingClassicMenu ||
 			fallbackNavigationMenus?.length > 0 ||
-			! classicMenus?.length
+			hasUnsavedBlocks
 		) {
 			return;
 		}
@@ -284,29 +303,46 @@ function Navigation( {
 		// a classic menu with a `primary` location or slug,
 		// then create a new navigation menu based on it.
 		// Otherwise, use the most recently created classic menu.
-		const primaryMenus = classicMenus.filter(
-			( classicMenu ) =>
-				classicMenu.locations.includes( 'primary' ) ||
-				classicMenu.slug === 'primary'
-		);
-
-		if ( primaryMenus.length ) {
-			convertClassicMenu(
-				primaryMenus[ 0 ].id,
-				primaryMenus[ 0 ].name,
-				'publish'
+		if ( classicMenus?.length ) {
+			const primaryMenus = classicMenus.filter(
+				( classicMenu ) =>
+					classicMenu.locations.includes( 'primary' ) ||
+					classicMenu.slug === 'primary'
 			);
+
+			if ( primaryMenus.length ) {
+				convertClassicMenu(
+					primaryMenus[ 0 ].id,
+					primaryMenus[ 0 ].name,
+					'publish'
+				);
+			} else {
+				classicMenus.sort( ( a, b ) => {
+					return b.id - a.id;
+				} );
+				convertClassicMenu(
+					classicMenus[ 0 ].id,
+					classicMenus[ 0 ].name,
+					'publish'
+				);
+			}
 		} else {
-			classicMenus.sort( ( a, b ) => {
-				return b.id - a.id;
-			} );
-			convertClassicMenu(
-				classicMenus[ 0 ].id,
-				classicMenus[ 0 ].name,
+			// If there are no fallback navigation menus and no classic menus,
+			// then create a new navigation menu.
+
+			// Check that we have a page-list block type.
+			let defaultBlocks = [];
+			if ( getBlockType( 'core/page-list' ) ) {
+				defaultBlocks = [ createBlock( 'core/page-list' ) ];
+			}
+
+			createNavigationMenu(
+				'Navigation', // TODO - use the template slug in future
+				defaultBlocks,
 				'publish'
 			);
 		}
-	}, [ hasResolvedNavigationMenus ] );
+	}, [ hasResolvedNavigationMenus, hasUnsavedBlocks ] );
 
 	const navRef = useRef();
 
@@ -326,22 +362,6 @@ function Navigation( {
 		classicMenus?.length === 0 &&
 		! hasUncontrolledInnerBlocks;
 
-	useEffect( () => {
-		if ( isPlaceholder ) {
-			/**
-			 *  this fallback only displays (both in editor and on front)
-			 *  the list of pages block if no menu is available as a fallback.
-			 *  We don't want the fallback to request a save,
-			 *  nor to be undoable, hence we mark it non persistent.
-			 */
-			__unstableMarkNextChangeAsNotPersistent();
-			replaceInnerBlocks( clientId, [ createBlock( 'core/page-list' ) ] );
-		}
-	}, [ clientId, isPlaceholder, ref ] );
-
-	const isEntityAvailable =
-		! isNavigationMenuMissing && isNavigationMenuResolved;
-
 	// "loading" state:
 	// - there is a menu creation process in progress.
 	// - there is a classic menu conversion process in progress.
@@ -393,16 +413,16 @@ function Navigation( {
 	] = useState();
 	const [ detectedOverlayColor, setDetectedOverlayColor ] = useState();
 
-	const handleUpdateMenu = (
-		menuId,
-		options = { focusNavigationBlock: false }
-	) => {
-		const { focusNavigationBlock } = options;
-		setRef( menuId );
-		if ( focusNavigationBlock ) {
-			selectBlock( clientId );
-		}
-	};
+	const handleUpdateMenu = useCallback(
+		( menuId, options = { focusNavigationBlock: false } ) => {
+			const { focusNavigationBlock } = options;
+			setRef( menuId );
+			if ( focusNavigationBlock ) {
+				selectBlock( clientId );
+			}
+		},
+		[ selectBlock, clientId ]
+	);
 
 	const onSelectClassicMenu = async ( classicMenu ) => {
 		const navMenu = await convertClassicMenu(
@@ -421,6 +441,40 @@ function Navigation( {
 		handleUpdateMenu( menuId );
 	};
 
+	useEffect( () => {
+		hideNavigationMenuStatusNotice();
+
+		if ( isCreatingNavigationMenu ) {
+			speak( __( `Creating Navigation Menu.` ) );
+		}
+
+		if ( createNavigationMenuIsSuccess ) {
+			handleUpdateMenu( createNavigationMenuPost.id, {
+				focusNavigationBlock: true,
+			} );
+
+			showNavigationMenuStatusNotice(
+				__( `Navigation Menu successfully created.` )
+			);
+		}
+
+		if ( createNavigationMenuIsError ) {
+			showNavigationMenuStatusNotice(
+				__( 'Failed to create Navigation Menu.' )
+			);
+		}
+	}, [
+		createNavigationMenuStatus,
+		createNavigationMenuError,
+		createNavigationMenuPost,
+		createNavigationMenuIsError,
+		createNavigationMenuIsSuccess,
+		isCreatingNavigationMenu,
+		handleUpdateMenu,
+		hideNavigationMenuStatusNotice,
+		showNavigationMenuStatusNotice,
+	] );
+
 	useEffect( () => {
 		hideClassicMenuConversionNotice();
 		if ( classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING ) {
@@ -598,6 +652,7 @@ function Navigation( {
 							<>
 								<h3>{ __( 'Submenus' ) }</h3>
 								<ToggleControl
+									__nextHasNoMarginBottom
 									checked={ openSubmenusOnClick }
 									onChange={ ( value ) => {
 										setAttributes( {
@@ -611,6 +666,7 @@ function Navigation( {
 								/>
 
 								<ToggleControl
+									__nextHasNoMarginBottom
 									checked={ showSubmenuIcon }
 									onChange={ ( value ) => {
 										setAttributes( {
@@ -682,14 +738,6 @@ function Navigation( {
 		</>
 	);
 
-	// If the block has inner blocks, but no menu id, then these blocks are either:
-	// - inserted via a pattern.
-	// - inserted directly via Code View (or otherwise).
-	// - from an older version of navigation block added before the block used a wp_navigation entity.
-	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
-	// that automatically saves the menu as an entity when changes are made to the inner blocks.
-	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
-
 	const isManageMenusButtonDisabled =
 		! hasManagePermissions || ! hasResolvedNavigationMenus;