@wordpress/block-library 6.0.15 → 6.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "6.0.15",
+	"version": "6.0.18",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,12 +37,12 @@
 		"@wordpress/api-fetch": "^5.2.6",
 		"@wordpress/autop": "^3.2.3",
 		"@wordpress/blob": "^3.2.2",
-		"@wordpress/block-editor": "^8.0.11",
-		"@wordpress/blocks": "^11.1.4",
-		"@wordpress/components": "^19.1.5",
-		"@wordpress/compose": "^5.0.6",
-		"@wordpress/core-data": "^4.0.8",
-		"@wordpress/data": "^6.1.4",
+		"@wordpress/block-editor": "^8.0.13",
+		"@wordpress/blocks": "^11.1.5",
+		"@wordpress/components": "^19.2.0",
+		"@wordpress/compose": "^5.0.7",
+		"@wordpress/core-data": "^4.0.9",
+		"@wordpress/data": "^6.1.5",
 		"@wordpress/date": "^4.2.3",
 		"@wordpress/deprecated": "^3.2.3",
 		"@wordpress/dom": "^3.2.7",
@@ -52,16 +52,16 @@
 		"@wordpress/html-entities": "^3.2.3",
 		"@wordpress/i18n": "^4.2.4",
 		"@wordpress/icons": "^6.1.1",
-		"@wordpress/interface": "^4.1.13",
+		"@wordpress/interface": "^4.1.15",
 		"@wordpress/is-shallow-equal": "^4.2.1",
 		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/notices": "^3.2.7",
+		"@wordpress/notices": "^3.2.8",
 		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.17",
-		"@wordpress/rich-text": "^5.0.6",
-		"@wordpress/server-side-render": "^3.0.15",
+		"@wordpress/reusable-blocks": "^3.0.19",
+		"@wordpress/rich-text": "^5.0.7",
+		"@wordpress/server-side-render": "^3.0.17",
 		"@wordpress/url": "^3.3.1",
-		"@wordpress/viewport": "^4.0.6",
+		"@wordpress/viewport": "^4.0.7",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "3665e3e1b121046300d8b2fa35074d748f16dbc2"
+	"gitHead": "f70f4664ac641bd107481c5c67ee6f5556a0a381"
 }

package/src/columns/block.json

@@ -23,11 +23,10 @@
 			"link": true
 		},
 		"spacing": {
-			"blockGap": true,
 			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"__experimentalDefaultControls": {
-				"blockGap": true
+				"padding": true
 			}
 		}
 	},

package/src/common.scss

@@ -6,6 +6,10 @@
 	@include background-colors-deprecated();
 	@include foreground-colors-deprecated();
 	@include gradient-colors-deprecated();
+	// This CSS Custom Properties aren't used anymore as defaults,
+	// but we still need to keep them for backward compatibility.
+	--wp--preset--font-size--normal: 16px;
+	--wp--preset--font-size--huge: 42px;
 }
 
 // Font sizes (not used now, kept because of backward compatibility).
@@ -17,6 +21,14 @@
 	font-size: 2.625em;
 }
 
+.has-normal-font-size {
+	font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.has-huge-font-size {
+	font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 // Text alignments.
 .has-text-align-center {
 	text-align: center;

package/src/editor.scss

@@ -50,6 +50,13 @@
 	@include gradient-colors-deprecated();
 }
 
+// This CSS Custom Properties aren't used anymore as defaults,
+// but we still need to keep them for backward compatibility.
+.editor-styles-wrapper {
+	--wp--preset--font-size--normal: 16px;
+	--wp--preset--font-size--huge: 42px;
+}
+
 // Font sizes (not used now, kept because of backward compatibility).
 //
 // The reason we add the editor class wrapper here is
@@ -62,6 +69,14 @@
 	font-size: 42px;
 }
 
+.editor-styles-wrapper .has-normal-font-size {
+	font-size: var(--wp--preset--font-size--normal) !important;
+}
+
+.editor-styles-wrapper .has-huge-font-size {
+	font-size: var(--wp--preset--font-size--huge) !important;
+}
+
 /**
  * Editor Normalization Styles
  *

package/src/gallery/index.php

@@ -48,4 +48,4 @@ function register_block_core_gallery() {
 	);
 }
 
-add_action( 'init', 'register_block_core_gallery', 20 );
+add_action( 'init', 'register_block_core_gallery' );

package/src/group/block.json

@@ -26,8 +26,10 @@
 		},
 		"spacing": {
 			"padding": true,
+			"blockGap": true,
 			"__experimentalDefaultControls": {
-				"padding": true
+				"padding": true,
+				"blockGap": true
 			}
 		},
 		"__experimentalBorder": {

package/src/group/edit.native.js

@@ -120,7 +120,7 @@ export default compose( [
 			const { innerBlocks } = block;
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const totalInnerBlocks = innerBlocks.length - 1;
-			const blockIndex = getBlockIndex( selectedBlockClientId, clientId );
+			const blockIndex = getBlockIndex( selectedBlockClientId );
 			isLastInnerBlockSelected = totalInnerBlocks === blockIndex;
 		}
 

package/src/home-link/index.php

@@ -79,7 +79,7 @@ function block_core_home_link_build_css_font_sizes( $context ) {
 		$font_sizes['css_classes'][] = sprintf( 'has-%s-font-size', $context['fontSize'] );
 	} elseif ( $has_custom_font_size ) {
 		// Add the custom font size inline style.
-		$font_sizes['inline_styles'] = sprintf( 'font-size: %spx;', $context['style']['typography']['fontSize'] );
+		$font_sizes['inline_styles'] = sprintf( 'font-size: %s;', $context['style']['typography']['fontSize'] );
 	}
 
 	return $font_sizes;

package/src/navigation/block.json

@@ -98,24 +98,13 @@
 			}
 		},
 		"spacing": {
-			"blockGap": true,
-			"units": [
-				"px",
-				"em",
-				"rem",
-				"vh",
-				"vw"
-			],
-			"__experimentalDefaultControls": {
-				"blockGap": true
-			}
+			"units": [ "px", "em", "rem", "vh", "vw" ]
 		},
 		"__experimentalLayout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"default": {
-				"type": "flex",
-				"setCascadingProperties": true
+				"type": "flex"
 			}
 		}
 	},

package/src/navigation/deprecated.js

@@ -43,7 +43,6 @@ const migrateWithLayout = ( attributes ) => {
 		Object.assign( updatedAttributes, {
 			layout: {
 				type: 'flex',
-				setCascadingProperties: 'true',
 				...( itemsJustification && {
 					justifyContent: itemsJustification,
 				} ),
@@ -135,7 +134,6 @@ const v6 = {
 			allowInheriting: false,
 			default: {
 				type: 'flex',
-				setCascadingProperties: true,
 			},
 		},
 	},

package/src/navigation/edit/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import noop from 'lodash';
+import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -27,7 +27,8 @@ import {
 	Warning,
 } from '@wordpress/block-editor';
 import { EntityProvider, useEntityProp } from '@wordpress/core-data';
-import { useDispatch, useSelect } from '@wordpress/data';
+
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import {
 	PanelBody,
 	ToggleControl,
@@ -52,6 +53,9 @@ import NavigationMenuSelector from './navigation-menu-selector';
 import NavigationMenuNameControl from './navigation-menu-name-control';
 import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
+import useNavigationNotice from './use-navigation-notice';
+
+const EMPTY_ARRAY = [];
 
 function getComputedStyle( node ) {
 	return node.ownerDocument.defaultView.getComputedStyle( node );
@@ -107,7 +111,11 @@ function Navigation( {
 		openSubmenusOnClick,
 		overlayMenu,
 		showSubmenuIcon,
-		layout: { justifyContent, orientation = 'horizontal' } = {},
+		layout: {
+			justifyContent,
+			orientation = 'horizontal',
+			flexWrap = 'wrap',
+		} = {},
 	} = attributes;
 
 	let areaMenu,
@@ -128,6 +136,7 @@ function Navigation( {
 
 	const ref = navigationArea ? navigationAreaMenu : attributes.ref;
 
+	const registry = useRegistry();
 	const setRef = useCallback(
 		( postId ) => {
 			setAttributes( { ref: postId } );
@@ -142,19 +151,41 @@ function Navigation( {
 		`navigationMenu/${ ref }`
 	);
 
-	const { innerBlocks, isInnerBlockSelected } = useSelect(
+	const {
+		hasUncontrolledInnerBlocks,
+		uncontrolledInnerBlocks,
+		isInnerBlockSelected,
+	} = useSelect(
 		( select ) => {
-			const { getBlocks, hasSelectedInnerBlock } = select(
+			const { getBlock, getBlocks, hasSelectedInnerBlock } = select(
 				blockEditorStore
 			);
+
+			// This relies on the fact that `getBlock` won't return controlled
+			// inner blocks, while `getBlocks` does. It might be more stable to
+			// introduce a selector like `getUncontrolledInnerBlocks`, just in
+			// case `getBlock` is fixed.
+			const _uncontrolledInnerBlocks = getBlock( clientId ).innerBlocks;
+			const _hasUncontrolledInnerBlocks =
+				_uncontrolledInnerBlocks?.length;
+			const _controlledInnerBlocks = _hasUncontrolledInnerBlocks
+				? EMPTY_ARRAY
+				: getBlocks( clientId );
+			const innerBlocks = _hasUncontrolledInnerBlocks
+				? _uncontrolledInnerBlocks
+				: _controlledInnerBlocks;
+
 			return {
-				innerBlocks: getBlocks( clientId ),
+				hasSubmenus: !! innerBlocks.find(
+					( block ) => block.name === 'core/navigation-submenu'
+				),
+				hasUncontrolledInnerBlocks: _hasUncontrolledInnerBlocks,
+				uncontrolledInnerBlocks: _uncontrolledInnerBlocks,
 				isInnerBlockSelected: hasSelectedInnerBlock( clientId, true ),
 			};
 		},
 		[ clientId ]
 	);
-	const hasExistingNavItems = !! innerBlocks.length;
 	const {
 		replaceInnerBlocks,
 		selectBlock,
@@ -166,10 +197,10 @@ function Navigation( {
 		setHasSavedUnsavedInnerBlocks,
 	] = useState( false );
 
-	const isWithinUnassignedArea = navigationArea && ! ref;
+	const isWithinUnassignedArea = !! navigationArea && ! ref;
 
 	const [ isPlaceholderShown, setIsPlaceholderShown ] = useState(
-		! hasExistingNavItems || isWithinUnassignedArea
+		! hasUncontrolledInnerBlocks || isWithinUnassignedArea
 	);
 
 	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] = useState(
@@ -183,6 +214,12 @@ function Navigation( {
 		hasResolvedNavigationMenus,
 		navigationMenus,
 		navigationMenu,
+		canUserUpdateNavigationEntity,
+		hasResolvedCanUserUpdateNavigationEntity,
+		canUserDeleteNavigationEntity,
+		hasResolvedCanUserDeleteNavigationEntity,
+		canUserCreateNavigation,
+		hasResolvedCanUserCreateNavigation,
 	} = useNavigationMenu( ref );
 
 	const navRef = useRef();
@@ -200,6 +237,10 @@ function Navigation( {
 		className: classnames( className, {
 			'items-justified-right': justifyContent === 'right',
 			'items-justified-space-between': justifyContent === 'space-between',
+			'items-justified-left': justifyContent === 'left',
+			'items-justified-center': justifyContent === 'center',
+			'is-vertical': orientation === 'vertical',
+			'no-wrap': flexWrap === 'nowrap',
 			'is-responsive': 'never' !== overlayMenu,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
@@ -270,7 +311,7 @@ function Navigation( {
 			setDetectedColor,
 			setDetectedBackgroundColor
 		);
-		const subMenuElement = navRef.current.querySelector(
+		const subMenuElement = navRef.current?.querySelector(
 			'[data-type="core/navigation-link"] [data-type="core/navigation-link"]'
 		);
 		if ( subMenuElement ) {
@@ -287,49 +328,105 @@ function Navigation( {
 		setIsPlaceholderShown( ! isEntityAvailable );
 	}, [ isEntityAvailable ] );
 
-	// If the ref no longer exists the reset the inner blocks
-	// to provide a clean slate.
+	const [ showCantEditNotice, hideCantEditNotice ] = useNavigationNotice( {
+		name: 'block-library/core/navigation/permissions/update',
+		message: __(
+			'You do not have permission to edit this Menu. Any changes made will not be saved.'
+		),
+	} );
+
+	const [ showCantCreateNotice, hideCantCreateNotice ] = useNavigationNotice(
+		{
+			name: 'block-library/core/navigation/permissions/create',
+			message: __(
+				'You do not have permission to create Navigation Menus.'
+			),
+		}
+	);
+
 	useEffect( () => {
-		if ( ref === undefined && innerBlocks.length > 0 ) {
-			replaceInnerBlocks( clientId, [] );
+		if ( ! isSelected && ! isInnerBlockSelected ) {
+			hideCantEditNotice();
+			hideCantCreateNotice();
 		}
-		// innerBlocks are intentionally not listed as deps. This function is only concerned
-		// with the snapshot from the time when ref became undefined.
-	}, [ clientId, ref, innerBlocks ] );
 
-	const startWithEmptyMenu = useCallback( () => {
-		if ( navigationArea ) {
-			setAreaMenu( 0 );
+		if ( isSelected || isInnerBlockSelected ) {
+			if (
+				hasResolvedCanUserUpdateNavigationEntity &&
+				! canUserUpdateNavigationEntity
+			) {
+				showCantEditNotice();
+			}
+
+			if (
+				! ref &&
+				hasResolvedCanUserCreateNavigation &&
+				! canUserCreateNavigation
+			) {
+				showCantCreateNotice();
+			}
 		}
-		setAttributes( {
-			ref: undefined,
-		} );
+	}, [
+		isSelected,
+		isInnerBlockSelected,
+		canUserUpdateNavigationEntity,
+		hasResolvedCanUserUpdateNavigationEntity,
+		canUserCreateNavigation,
+		hasResolvedCanUserCreateNavigation,
+		ref,
+	] );
 
-		setIsPlaceholderShown( true );
-	}, [ clientId ] );
+	const startWithEmptyMenu = useCallback( () => {
+		registry.batch( () => {
+			if ( navigationArea ) {
+				setAreaMenu( 0 );
+			}
+			setAttributes( {
+				ref: undefined,
+			} );
+			if ( ! ref ) {
+				replaceInnerBlocks( clientId, [] );
+			}
+			setIsPlaceholderShown( true );
+		} );
+	}, [ clientId, ref ] );
 
 	// If the block has inner blocks, but no menu id, this was an older
 	// navigation block added before the block used a wp_navigation entity.
 	// Either this block was saved in the content or inserted by a pattern.
 	// Consider this 'unsaved'. Offer an uncontrolled version of inner blocks,
 	// that automatically saves the menu.
-	const hasUnsavedBlocks =
-		hasExistingNavItems && ! isEntityAvailable && ! isWithinUnassignedArea;
+	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
 	if ( hasUnsavedBlocks ) {
 		return (
-			<UnsavedInnerBlocks
-				blockProps={ blockProps }
-				blocks={ innerBlocks }
-				clientId={ clientId }
-				navigationMenus={ navigationMenus }
-				hasSelection={ isSelected || isInnerBlockSelected }
-				hasSavedUnsavedInnerBlocks={ hasSavedUnsavedInnerBlocks }
-				onSave={ ( post ) => {
-					setHasSavedUnsavedInnerBlocks( true );
-					// Switch to using the wp_navigation entity.
-					setRef( post.id );
-				} }
-			/>
+			<nav { ...blockProps }>
+				<ResponsiveWrapper
+					id={ clientId }
+					onToggle={ setResponsiveMenuVisibility }
+					isOpen={ isResponsiveMenuOpen }
+					isResponsive={ 'never' !== overlayMenu }
+					isHiddenByDefault={ 'always' === overlayMenu }
+					classNames={ overlayClassnames }
+					styles={ overlayStyles }
+				>
+					<UnsavedInnerBlocks
+						blockProps={ blockProps }
+						blocks={ uncontrolledInnerBlocks }
+						clientId={ clientId }
+						navigationMenus={ navigationMenus }
+						hasSelection={ isSelected || isInnerBlockSelected }
+						hasSavedUnsavedInnerBlocks={
+							hasSavedUnsavedInnerBlocks
+						}
+						onSave={ ( post ) => {
+							// Set some state used as a guard to prevent the creation of multiple posts.
+							setHasSavedUnsavedInnerBlocks( true );
+							// Switch to using the wp_navigation entity.
+							setRef( post.id );
+						} }
+					/>
+				</ResponsiveWrapper>
+			</nav>
 		);
 	}
 
@@ -382,6 +479,7 @@ function Navigation( {
 											onClose();
 										} }
 										onCreateNew={ startWithEmptyMenu }
+										showCreate={ canUserCreateNavigation }
 									/>
 								) }
 							</ToolbarDropdownMenu>
@@ -492,18 +590,16 @@ function Navigation( {
 				</InspectorControls>
 				{ isEntityAvailable && (
 					<InspectorControls __experimentalGroup="advanced">
-						<NavigationMenuNameControl />
-						<NavigationMenuDeleteControl
-							onDelete={ () => {
-								if ( navigationArea ) {
-									setAreaMenu( 0 );
-								}
-								setAttributes( {
-									ref: undefined,
-								} );
-								setIsPlaceholderShown( true );
-							} }
-						/>
+						{ hasResolvedCanUserUpdateNavigationEntity &&
+							canUserUpdateNavigationEntity && (
+								<NavigationMenuNameControl />
+							) }
+						{ hasResolvedCanUserDeleteNavigationEntity &&
+							canUserDeleteNavigationEntity && (
+								<NavigationMenuDeleteControl
+									onDelete={ startWithEmptyMenu }
+								/>
+							) }
 					</InspectorControls>
 				) }
 				<nav { ...blockProps }>
@@ -521,11 +617,13 @@ function Navigation( {
 								hasResolvedNavigationMenus
 							}
 							clientId={ clientId }
+							canUserCreateNavigation={ canUserCreateNavigation }
 						/>
 					) }
-					{ ! isEntityAvailable && ! isPlaceholderShown && (
-						<PlaceholderPreview isLoading />
-					) }
+					{ ! hasResolvedCanUserCreateNavigation ||
+						( ! isEntityAvailable && ! isPlaceholderShown && (
+							<PlaceholderPreview isLoading />
+						) ) }
 					{ ! isPlaceholderShown && (
 						<ResponsiveWrapper
 							id={ clientId }

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

@@ -12,7 +12,11 @@ import { addQueryArgs } from '@wordpress/url';
  */
 import useNavigationMenu from '../use-navigation-menu';
 
-export default function NavigationMenuSelector( { onSelect, onCreateNew } ) {
+export default function NavigationMenuSelector( {
+	onSelect,
+	onCreateNew,
+	showCreate = false,
+} ) {
 	const { navigationMenus } = useNavigationMenu();
 	const ref = useEntityId( 'postType', 'wp_navigation' );
 
@@ -42,18 +46,20 @@ export default function NavigationMenuSelector( { onSelect, onCreateNew } ) {
 					} ) }
 				/>
 			</MenuGroup>
-			<MenuGroup>
-				<MenuItem onClick={ onCreateNew }>
-					{ __( 'Create new menu' ) }
-				</MenuItem>
-				<MenuItem
-					href={ addQueryArgs( 'edit.php', {
-						post_type: 'wp_navigation',
-					} ) }
-				>
-					{ __( 'Manage menus' ) }
-				</MenuItem>
-			</MenuGroup>
+			{ showCreate && (
+				<MenuGroup>
+					<MenuItem onClick={ onCreateNew }>
+						{ __( 'Create new menu' ) }
+					</MenuItem>
+					<MenuItem
+						href={ addQueryArgs( 'edit.php', {
+							post_type: 'wp_navigation',
+						} ) }
+					>
+						{ __( 'Manage menus' ) }
+					</MenuItem>
+				</MenuGroup>
+			) }
 		</>
 	);
 }