@wordpress/block-library 8.3.2 → 8.4.0

package/src/image/image.js

@@ -124,30 +124,31 @@ export default function Image( {
 		},
 		[ id, isSelected, clientId ]
 	);
-	const { canInsertCover, imageEditing, imageSizes, mediaUpload } = useSelect(
-		( select ) => {
-			const { getBlockRootClientId, getSettings, canInsertBlockType } =
-				select( blockEditorStore );
-
-			const rootClientId = getBlockRootClientId( clientId );
-			const settings = Object.fromEntries(
-				Object.entries( getSettings() ).filter( ( [ key ] ) =>
-					[ 'imageEditing', 'imageSizes', 'mediaUpload' ].includes(
-						key
-					)
-				)
-			);
-
-			return {
-				...settings,
-				canInsertCover: canInsertBlockType(
-					'core/cover',
-					rootClientId
-				),
-			};
-		},
-		[ clientId ]
-	);
+	const { canInsertCover, imageEditing, imageSizes, maxWidth, mediaUpload } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockRootClientId,
+					getSettings,
+					canInsertBlockType,
+				} = select( blockEditorStore );
+
+				const rootClientId = getBlockRootClientId( clientId );
+				const settings = getSettings();
+
+				return {
+					imageEditing: settings.imageEditing,
+					imageSizes: settings.imageSizes,
+					maxWidth: settings.maxWidth,
+					mediaUpload: settings.mediaUpload,
+					canInsertCover: canInsertBlockType(
+						'core/cover',
+						rootClientId
+					),
+				};
+			},
+			[ clientId ]
+		);
 	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
@@ -548,9 +549,13 @@ export default function Image( {
 		// With the current implementation of ResizableBox, an image needs an
 		// explicit pixel value for the max-width. In absence of being able to
 		// set the content-width, this max-width is currently dictated by the
-		// vanilla editor style. We'll use the clientWidth here, to prevent the width
-		// of the image growing larger than the width of the block column.
-		const maxWidthBuffer = clientWidth;
+		// vanilla editor style. The following variable adds a buffer to this
+		// vanilla style, so 3rd party themes have some wiggleroom. This does,
+		// in most cases, allow you to scale the image beyond the width of the
+		// main column, though not infinitely.
+		// @todo It would be good to revisit this once a content-width variable
+		// becomes available.
+		const maxWidthBuffer = maxWidth * 2.5;
 
 		let showRightHandle = false;
 		let showLeftHandle = false;

package/src/image/style.scss

@@ -6,6 +6,17 @@
 		box-sizing: border-box;
 	}
 
+	// The following style maintains border radius application for deprecated
+	// image blocks that applied border radius to the outer `figure` element.
+	//
+	// See: https://github.com/WordPress/gutenberg/issues/47422
+	&[style*="border-radius"] {
+		> a,
+		img {
+			border-radius: inherit;
+		}
+	}
+
 	&.has-custom-border {
 		img {
 			box-sizing: border-box;
@@ -41,6 +52,7 @@
 		float: left;
 		/*rtl:ignore*/
 		margin-left: 0;
+		/*rtl:ignore*/
 		margin-right: 1em;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;
@@ -51,6 +63,7 @@
 		float: right;
 		/*rtl:ignore*/
 		margin-right: 0;
+		/*rtl:ignore*/
 		margin-left: 1em;
 		margin-top: 0.5em;
 		margin-bottom: 0.5em;

package/src/latest-comments/block.json

@@ -34,6 +34,19 @@
 		"spacing": {
 			"margin": true,
 			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-latest-comments-editor",

package/src/latest-comments/edit.js

@@ -28,6 +28,14 @@ export default function LatestComments( { attributes, setAttributes } ) {
 	const { commentsToShow, displayAvatar, displayDate, displayExcerpt } =
 		attributes;
 
+	const serverSideAttributes = {
+		...attributes,
+		style: {
+			...attributes?.style,
+			spacing: undefined,
+		},
+	};
+
 	return (
 		<div { ...useBlockProps() }>
 			<InspectorControls>
@@ -71,8 +79,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/navigation/edit/index.js

@@ -27,7 +27,7 @@ import {
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 } from '@wordpress/block-editor';
-import { EntityProvider, store as coreStore } from '@wordpress/core-data';
+import { EntityProvider } from '@wordpress/core-data';
 
 import { useDispatch } from '@wordpress/data';
 import {
@@ -112,7 +112,6 @@ function Navigation( {
 
 	const recursionId = `navigationMenu/${ ref }`;
 	const hasAlreadyRendered = useHasRecursion( recursionId );
-	const { editEntityRecord } = useDispatch( coreStore );
 
 	// Preload classic menus, so that they don't suddenly pop-in when viewing
 	// the Select Menu dropdown.
@@ -128,11 +127,6 @@ function Navigation( {
 			name: 'block-library/core/navigation/classic-menu-conversion',
 		} );
 
-	const [ showMenuAutoPublishDraftNotice, hideMenuAutoPublishDraftNotice ] =
-		useNavigationNotice( {
-			name: 'block-library/core/navigation/auto-publish-draft',
-		} );
-
 	const [
 		showNavigationMenuPermissionsNotice,
 		hideNavigationMenuPermissionsNotice,
@@ -209,7 +203,6 @@ function Navigation( {
 		isNavigationMenuResolved,
 		isNavigationMenuMissing,
 		navigationMenus,
-		navigationMenu,
 		canUserUpdateNavigationMenu,
 		hasResolvedCanUserUpdateNavigationMenu,
 		canUserDeleteNavigationMenu,
@@ -536,26 +529,6 @@ function Navigation( {
 		{ open: overlayMenuPreview }
 	);
 
-	// Prompt the user to publish the menu they have set as a draft
-	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
-	useEffect( () => {
-		hideMenuAutoPublishDraftNotice();
-		if ( ! isDraftNavigationMenu ) {
-			return;
-		}
-		editEntityRecord(
-			'postType',
-			'wp_navigation',
-			navigationMenu?.id,
-			{ status: 'publish' },
-			{ throwOnError: true }
-		).catch( () => {
-			showMenuAutoPublishDraftNotice(
-				__( 'Error occurred while publishing the navigation menu.' )
-			);
-		} );
-	}, [ isDraftNavigationMenu, navigationMenu ] );
-
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 	const stylingInspectorControls = (
 		<>
@@ -752,8 +725,6 @@ function Navigation( {
 					<UnsavedInnerBlocks
 						createNavigationMenu={ createNavigationMenu }
 						blocks={ uncontrolledInnerBlocks }
-						templateLock={ templateLock }
-						navigationMenus={ navigationMenus }
 						hasSelection={ isSelected || isInnerBlockSelected }
 					/>
 				</ResponsiveWrapper>

package/src/navigation/edit/menu-inspector-controls.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	experiments as blockEditorExperiments,
+	privateApis as blockEditorPrivateApis,
 	InspectorControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -19,8 +19,7 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import NavigationMenuSelector from './navigation-menu-selector';
-import { LeafMoreMenu } from '../leaf-more-menu';
-import { unlock } from '../../experiments';
+import { unlock } from '../../private-apis';
 import DeletedNavigationWarning from './deleted-navigation-warning';
 import useNavigationMenu from '../use-navigation-menu';
 
@@ -34,7 +33,7 @@ const MainContent = ( {
 	isNavigationMenuMissing,
 	onCreateNew,
 } ) => {
-	const { OffCanvasEditor } = unlock( blockEditorExperiments );
+	const { OffCanvasEditor, LeafMoreMenu } = unlock( blockEditorPrivateApis );
 	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
 	// This is required else the list view will display the entire block tree.
 	const clientIdsTree = useSelect(

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

@@ -7,7 +7,6 @@ import {
 	MenuItemsChoice,
 	DropdownMenu,
 } from '@wordpress/components';
-import { useEntityProp } from '@wordpress/core-data';
 import { moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -41,22 +40,15 @@ function NavigationMenuSelector( {
 	const {
 		navigationMenus,
 		hasResolvedNavigationMenus,
-		isNavigationMenuResolved,
 		canUserCreateNavigationMenu,
 		canSwitchNavigationMenu,
 	} = useNavigationMenu();
 
-	const [ currentTitle ] = useEntityProp(
-		'postType',
-		'wp_navigation',
-		'title'
-	);
-
 	const menuChoices = useMemo( () => {
 		return (
 			navigationMenus?.map( ( { id, title }, index ) => {
 				const label =
-					decodeEntities( title.rendered ) ||
+					decodeEntities( title?.rendered ) ||
 					/* translators: %s is the index of the menu in the list of menus. */
 					sprintf( __( '(no title %s)' ), index + 1 );
 
@@ -73,14 +65,7 @@ function NavigationMenuSelector( {
 				};
 			} ) || []
 		);
-	}, [
-		currentTitle,
-		currentMenuId,
-		navigationMenus,
-		createNavigationMenuIsSuccess,
-		isNavigationMenuResolved,
-		hasResolvedNavigationMenus,
-	] );
+	}, [ currentMenuId, navigationMenus, actionLabel ] );
 
 	const hasNavigationMenus = !! navigationMenus?.length;
 	const hasClassicMenus = !! classicMenus?.length;
@@ -93,10 +78,10 @@ function NavigationMenuSelector( {
 		hasResolvedNavigationMenus && currentMenuId === null;
 
 	useEffect( () => {
-		if ( ! hasResolvedNavigationMenus ) {
+		if ( ! hasResolvedNavigationMenus && ! canUserCreateNavigationMenu ) {
 			setSelectorLabel( __( 'Loading …' ) );
 		} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
-			setSelectorLabel( __( 'Choose a Navigation menu' ) );
+			setSelectorLabel( __( 'Choose or create a Navigation menu' ) );
 		}
 
 		if (
@@ -105,13 +90,7 @@ function NavigationMenuSelector( {
 		) {
 			setIsCreatingMenu( false );
 		}
-	}, [
-		currentMenuId,
-		hasNavigationMenus,
-		hasResolvedNavigationMenus,
-		createNavigationMenuIsSuccess,
-		isNavigationMenuResolved,
-	] );
+	}, [ hasResolvedNavigationMenus, createNavigationMenuIsSuccess ] );
 
 	const NavigationMenuSelectorDropdown = (
 		<DropdownMenu
@@ -126,9 +105,13 @@ function NavigationMenuSelector( {
 							<MenuItemsChoice
 								value={ currentMenuId }
 								onSelect={ ( menuId ) => {
+									setSelectorLabel( __( 'Loading …' ) );
+									setIsCreatingMenu( true );
 									onSelectNavigationMenu( menuId );
+									onClose();
 								} }
 								choices={ menuChoices }
+								disabled={ isCreatingMenu }
 							/>
 						</MenuGroup>
 					) }
@@ -142,6 +125,7 @@ function NavigationMenuSelector( {
 											setSelectorLabel(
 												__( 'Loading …' )
 											);
+											setIsCreatingMenu( true );
 											onSelectClassicMenu( menu );
 											onClose();
 										} }
@@ -150,6 +134,7 @@ function NavigationMenuSelector( {
 											createActionLabel,
 											label
 										) }
+										disabled={ isCreatingMenu }
 									>
 										{ label }
 									</MenuItem>
@@ -161,6 +146,7 @@ function NavigationMenuSelector( {
 					{ canUserCreateNavigationMenu && (
 						<MenuGroup label={ __( 'Tools' ) }>
 							<MenuItem
+								disabled={ isCreatingMenu }
 								onClick={ () => {
 									onClose();
 									onCreateNew();