@wordpress/block-library 9.42.0 → 9.43.0

package/src/navigation/edit/index.js

@@ -966,16 +966,7 @@ function Navigation( {
 
 	if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) {
 		return (
-			<TagName
-				{ ...blockProps }
-				aria-describedby={
-					! isPlaceholder ? accessibleDescriptionId : undefined
-				}
-			>
-				<AccessibleDescription id={ accessibleDescriptionId }>
-					{ __( 'Unsaved Navigation Menu.' ) }
-				</AccessibleDescription>
-
+			<>
 				<MenuInspectorControls
 					clientId={ clientId }
 					createNavigationMenuIsSuccess={
@@ -992,26 +983,36 @@ function Navigation( {
 					blockEditingMode={ blockEditingMode }
 				/>
 				{ blockEditingMode === 'default' && stylingInspectorControls }
-				<ResponsiveWrapper
-					id={ clientId }
-					onToggle={ setResponsiveMenuVisibility }
-					isOpen={ isResponsiveMenuOpen }
-					hasIcon={ hasIcon }
-					icon={ icon }
-					isResponsive={ isResponsive }
-					isHiddenByDefault={ isHiddenByDefault }
-					overlayBackgroundColor={ overlayBackgroundColor }
-					overlayTextColor={ overlayTextColor }
-					overlay={ overlay }
-					onNavigateToEntityRecord={ onNavigateToEntityRecord }
+				<TagName
+					{ ...blockProps }
+					aria-describedby={
+						! isPlaceholder ? accessibleDescriptionId : undefined
+					}
 				>
-					<UnsavedInnerBlocks
-						createNavigationMenu={ createNavigationMenu }
-						blocks={ uncontrolledInnerBlocks }
-						hasSelection={ isSelected || isInnerBlockSelected }
-					/>
-				</ResponsiveWrapper>
-			</TagName>
+					<AccessibleDescription id={ accessibleDescriptionId }>
+						{ __( 'Unsaved Navigation Menu.' ) }
+					</AccessibleDescription>
+					<ResponsiveWrapper
+						id={ clientId }
+						onToggle={ setResponsiveMenuVisibility }
+						isOpen={ isResponsiveMenuOpen }
+						hasIcon={ hasIcon }
+						icon={ icon }
+						isResponsive={ isResponsive }
+						isHiddenByDefault={ isHiddenByDefault }
+						overlayBackgroundColor={ overlayBackgroundColor }
+						overlayTextColor={ overlayTextColor }
+						overlay={ overlay }
+						onNavigateToEntityRecord={ onNavigateToEntityRecord }
+					>
+						<UnsavedInnerBlocks
+							createNavigationMenu={ createNavigationMenu }
+							blocks={ uncontrolledInnerBlocks }
+							hasSelection={ isSelected || isInnerBlockSelected }
+						/>
+					</ResponsiveWrapper>
+				</TagName>
+			</>
 		);
 	}
 
@@ -1019,7 +1020,7 @@ function Navigation( {
 	// TODO - the user should be able to select a new one?
 	if ( ref && isNavigationMenuMissing ) {
 		return (
-			<TagName { ...blockProps }>
+			<>
 				<MenuInspectorControls
 					clientId={ clientId }
 					createNavigationMenuIsSuccess={
@@ -1035,10 +1036,12 @@ function Navigation( {
 					isLoading={ isLoading }
 					blockEditingMode={ blockEditingMode }
 				/>
-				<DeletedNavigationWarning
-					onCreateNew={ createUntitledEmptyNavigationMenu }
-				/>
-			</TagName>
+				<TagName { ...blockProps }>
+					<DeletedNavigationWarning
+						onCreateNew={ createUntitledEmptyNavigationMenu }
+					/>
+				</TagName>
+			</>
 		);
 	}
 
@@ -1088,105 +1091,106 @@ function Navigation( {
 	}
 
 	return (
-		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
-			<RecursionProvider uniqueId={ recursionId }>
-				<MenuInspectorControls
-					clientId={ clientId }
-					createNavigationMenuIsSuccess={
-						createNavigationMenuIsSuccess
-					}
-					createNavigationMenuIsError={ createNavigationMenuIsError }
-					currentMenuId={ ref }
-					isNavigationMenuMissing={ isNavigationMenuMissing }
-					isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
-					onCreateNew={ createUntitledEmptyNavigationMenu }
-					onSelectClassicMenu={ onSelectClassicMenu }
-					onSelectNavigationMenu={ onSelectNavigationMenu }
-					isLoading={ isLoading }
-					blockEditingMode={ blockEditingMode }
-				/>
-				{ blockEditingMode === 'default' && stylingInspectorControls }
-				{ blockEditingMode === 'contentOnly' && isEntityAvailable && (
-					<NavigationAddPageButton clientId={ clientId } />
-				) }
-				{ blockEditingMode === 'default' && isEntityAvailable && (
-					<InspectorControls group="advanced">
-						{ hasResolvedCanUserUpdateNavigationMenu &&
-							canUserUpdateNavigationMenu && (
-								<NavigationMenuNameControl />
-							) }
-						{ hasResolvedCanUserDeleteNavigationMenu &&
-							canUserDeleteNavigationMenu && (
-								<NavigationMenuDeleteControl
-									onDelete={ () => {
-										replaceInnerBlocks( clientId, [] );
-										showNavigationMenuStatusNotice(
-											__(
-												'Navigation Menu successfully deleted.'
-											)
-										);
-									} }
-								/>
-							) }
-						<ManageMenusButton
-							disabled={ isManageMenusButtonDisabled }
-							className="wp-block-navigation-manage-menus-button"
-						/>
-					</InspectorControls>
-				) }
-
-				<TagName
-					{ ...blockProps }
-					aria-describedby={
-						! isPlaceholder && ! isLoading
-							? accessibleDescriptionId
-							: undefined
-					}
-				>
-					{ isLoading && ! isHiddenByDefault && (
-						<div className="wp-block-navigation__loading-indicator-container">
-							<Spinner className="wp-block-navigation__loading-indicator" />
-						</div>
-					) }
-
-					{ ( ! isLoading || isHiddenByDefault ) && (
-						<>
-							<AccessibleMenuDescription
-								id={ accessibleDescriptionId }
-							/>
-							<ResponsiveWrapper
-								id={ clientId }
-								onToggle={ setResponsiveMenuVisibility }
-								hasIcon={ hasIcon }
-								icon={ icon }
-								isOpen={ isResponsiveMenuOpen }
-								isResponsive={ isResponsive }
-								isHiddenByDefault={ isHiddenByDefault }
-								overlayBackgroundColor={
-									overlayBackgroundColor
-								}
-								overlayTextColor={ overlayTextColor }
-								overlay={ overlay }
-								onNavigateToEntityRecord={
-									onNavigateToEntityRecord
-								}
-							>
-								{ isEntityAvailable && (
-									<NavigationInnerBlocks
-										clientId={ clientId }
-										hasCustomPlaceholder={
-											!! CustomPlaceholder
-										}
-										templateLock={ templateLock }
-										orientation={ orientation }
+		<>
+			<MenuInspectorControls
+				clientId={ clientId }
+				createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
+				createNavigationMenuIsError={ createNavigationMenuIsError }
+				currentMenuId={ ref }
+				isNavigationMenuMissing={ isNavigationMenuMissing }
+				isManageMenusButtonDisabled={ isManageMenusButtonDisabled }
+				onCreateNew={ createUntitledEmptyNavigationMenu }
+				onSelectClassicMenu={ onSelectClassicMenu }
+				onSelectNavigationMenu={ onSelectNavigationMenu }
+				isLoading={ isLoading }
+				blockEditingMode={ blockEditingMode }
+			/>
+			{ blockEditingMode === 'default' && stylingInspectorControls }
+			<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
+				<RecursionProvider uniqueId={ recursionId }>
+					{ blockEditingMode === 'contentOnly' &&
+						isEntityAvailable && (
+							<NavigationAddPageButton clientId={ clientId } />
+						) }
+					{ blockEditingMode === 'default' && isEntityAvailable && (
+						<InspectorControls group="advanced">
+							{ hasResolvedCanUserUpdateNavigationMenu &&
+								canUserUpdateNavigationMenu && (
+									<NavigationMenuNameControl />
+								) }
+							{ hasResolvedCanUserDeleteNavigationMenu &&
+								canUserDeleteNavigationMenu && (
+									<NavigationMenuDeleteControl
+										onDelete={ () => {
+											replaceInnerBlocks( clientId, [] );
+											showNavigationMenuStatusNotice(
+												__(
+													'Navigation Menu successfully deleted.'
+												)
+											);
+										} }
 									/>
 								) }
-							</ResponsiveWrapper>
-						</>
+							<ManageMenusButton
+								disabled={ isManageMenusButtonDisabled }
+								className="wp-block-navigation-manage-menus-button"
+							/>
+						</InspectorControls>
 					) }
-				</TagName>
-			</RecursionProvider>
-		</EntityProvider>
+
+					<TagName
+						{ ...blockProps }
+						aria-describedby={
+							! isPlaceholder && ! isLoading
+								? accessibleDescriptionId
+								: undefined
+						}
+					>
+						{ isLoading && ! isHiddenByDefault && (
+							<div className="wp-block-navigation__loading-indicator-container">
+								<Spinner className="wp-block-navigation__loading-indicator" />
+							</div>
+						) }
+
+						{ ( ! isLoading || isHiddenByDefault ) && (
+							<>
+								<AccessibleMenuDescription
+									id={ accessibleDescriptionId }
+								/>
+								<ResponsiveWrapper
+									id={ clientId }
+									onToggle={ setResponsiveMenuVisibility }
+									hasIcon={ hasIcon }
+									icon={ icon }
+									isOpen={ isResponsiveMenuOpen }
+									isResponsive={ isResponsive }
+									isHiddenByDefault={ isHiddenByDefault }
+									overlayBackgroundColor={
+										overlayBackgroundColor
+									}
+									overlayTextColor={ overlayTextColor }
+									overlay={ overlay }
+									onNavigateToEntityRecord={
+										onNavigateToEntityRecord
+									}
+								>
+									{ isEntityAvailable && (
+										<NavigationInnerBlocks
+											clientId={ clientId }
+											hasCustomPlaceholder={
+												!! CustomPlaceholder
+											}
+											templateLock={ templateLock }
+											orientation={ orientation }
+										/>
+									) }
+								</ResponsiveWrapper>
+							</>
+						) }
+					</TagName>
+				</RecursionProvider>
+			</EntityProvider>
+		</>
 	);
 }
 

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

@@ -69,7 +69,8 @@ function NavigationMenuSelector( {
 	const [ currentTitle ] = useEntityProp(
 		'postType',
 		'wp_navigation',
-		'title'
+		'title',
+		currentMenuId
 	);
 
 	const menuChoices = useMemo( () => {

package/src/navigation/style.scss

@@ -27,9 +27,6 @@ $navigation-icon-size: 24px;
 	ul,
 	ul li {
 		list-style: none;
-
-		// Overrides generic ".entry-content li" styles on the front end.
-		padding: 0;
 	}
 
 	// Menu item container.
@@ -156,6 +153,11 @@ $navigation-icon-size: 24px;
 	}
 }
 
+// Low specificity padding to not override global styles.
+:where(.wp-block-navigation) ul li {
+	padding: 0;
+}
+
 // Styles for submenu flyout.
 // These are separated out with reduced specificity to allow better inheritance from Global Styles.
 .wp-block-navigation .has-child {

package/src/navigation-link/index.php

@@ -7,6 +7,7 @@
 
 require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
 require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
+require_once __DIR__ . '/navigation-link/shared/build-css-font-sizes.php';
 
 /**
  * Build an array with CSS classes and inline styles defining the colors
@@ -80,43 +81,6 @@ function block_core_navigation_link_build_css_colors( $context, $attributes, $is
 	return $colors;
 }
 
-/**
- * Build an array with CSS classes and inline styles defining the font sizes
- * which will be applied to the navigation markup in the front-end.
- *
- * @since 5.9.0
- *
- * @param  array $context Navigation block context.
- * @return array Font size CSS classes and inline styles.
- */
-function block_core_navigation_link_build_css_font_sizes( $context ) {
-	// CSS classes.
-	$font_sizes = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
-	);
-
-	$has_named_font_size  = array_key_exists( 'fontSize', $context );
-	$has_custom_font_size = isset( $context['style']['typography']['fontSize'] );
-
-	if ( $has_named_font_size ) {
-		// Add the font size class.
-		$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: %s;',
-			wp_get_typography_font_size_value(
-				array(
-					'size' => $context['style']['typography']['fontSize'],
-				)
-			)
-		);
-	}
-
-	return $font_sizes;
-}
-
 /**
  * Decodes a url if it's encoded, returning the same url if not.
  *
@@ -174,7 +138,15 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$font_sizes      = block_core_navigation_link_build_css_font_sizes( $block->context );
+	// The build system prefixes this function with "gutenberg_" to avoid
+	// collisions with the core version. Until this function is backported to
+	// core, we need to guard its use and only call the prefixed name in
+	//  the plugin.
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		$font_sizes = gutenberg_block_core_shared_navigation_build_css_font_sizes( $block->context );
+	} else {
+		$font_sizes = block_core_shared_navigation_build_css_font_sizes( $block->context );
+	}
 	$classes         = array_merge(
 		$font_sizes['css_classes']
 	);

package/src/navigation-link/shared/build-css-font-sizes.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Shared helper function for building CSS font sizes in navigation blocks.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Build an array with CSS classes and inline styles defining the font sizes
+ * which will be applied to the navigation markup in the front-end.
+ *
+ * @since 7.1.0
+ *
+ * @param  array $context Navigation block context.
+ * @return array Font size CSS classes and inline styles.
+ */
+function block_core_shared_navigation_build_css_font_sizes( $context ) {
+	// CSS classes.
+	$font_sizes = array(
+		'css_classes'   => array(),
+		'inline_styles' => '',
+	);
+
+	$has_named_font_size  = array_key_exists( 'fontSize', $context );
+	$has_custom_font_size = isset( $context['style']['typography']['fontSize'] );
+
+	if ( $has_named_font_size ) {
+		// Add the font size class.
+		$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: %s;',
+			wp_get_typography_font_size_value(
+				array(
+					'size' => $context['style']['typography']['fontSize'],
+				)
+			)
+		);
+	}
+
+	return $font_sizes;
+}

package/src/navigation-submenu/index.php

@@ -7,6 +7,7 @@
 
 require_once __DIR__ . '/navigation-link/shared/item-should-render.php';
 require_once __DIR__ . '/navigation-link/shared/render-submenu-icon.php';
+require_once __DIR__ . '/navigation-link/shared/build-css-font-sizes.php';
 
 /**
  * Returns the submenu visibility value with backward compatibility
@@ -49,43 +50,6 @@ function block_core_navigation_submenu_get_submenu_visibility( $context ) {
 	return $submenu_visibility ?? 'hover';
 }
 
-/**
- * Build an array with CSS classes and inline styles defining the font sizes
- * which will be applied to the navigation markup in the front-end.
- *
- * @since 5.9.0
- *
- * @param  array $context Navigation block context.
- * @return array Font size CSS classes and inline styles.
- */
-function block_core_navigation_submenu_build_css_font_sizes( $context ) {
-	// CSS classes.
-	$font_sizes = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
-	);
-
-	$has_named_font_size  = array_key_exists( 'fontSize', $context );
-	$has_custom_font_size = isset( $context['style']['typography']['fontSize'] );
-
-	if ( $has_named_font_size ) {
-		// Add the font size class.
-		$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: %s;',
-			wp_get_typography_font_size_value(
-				array(
-					'size' => $context['style']['typography']['fontSize'],
-				)
-			)
-		);
-	}
-
-	return $font_sizes;
-}
-
 /**
  * Renders the `core/navigation-submenu` block.
  *
@@ -110,7 +74,15 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$font_sizes      = block_core_navigation_submenu_build_css_font_sizes( $block->context );
+	// The build system prefixes this function with "gutenberg_" to avoid
+	// collisions with the core version. Until this function is backported to
+	// core, we need to guard its use and only call the prefixed name in
+	//  the plugin.
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		$font_sizes = gutenberg_block_core_shared_navigation_build_css_font_sizes( $block->context );
+	} else {
+		$font_sizes = block_core_shared_navigation_build_css_font_sizes( $block->context );
+	}
 	$style_attribute = $font_sizes['inline_styles'];
 
 	// Render inner blocks first to check if any menu items will actually display.

package/src/page-list/index.php

@@ -5,6 +5,8 @@
  * @package WordPress
  */
 
+require_once __DIR__ . '/navigation-link/shared/build-css-font-sizes.php';
+
 /**
  * Returns the submenu visibility value with backward compatibility
  * for the deprecated openSubmenusOnClick attribute.
@@ -123,44 +125,6 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	return $colors;
 }
-
-/**
- * Build an array with CSS classes and inline styles defining the font sizes
- * which will be applied to the pages markup in the front-end when it is a descendant of navigation.
- *
- * @since 5.8.0
- *
- * @param  array $context Navigation block context.
- * @return array Font size CSS classes and inline styles.
- */
-function block_core_page_list_build_css_font_sizes( $context ) {
-	// CSS classes.
-	$font_sizes = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
-	);
-
-	$has_named_font_size  = array_key_exists( 'fontSize', $context );
-	$has_custom_font_size = isset( $context['style']['typography']['fontSize'] );
-
-	if ( $has_named_font_size ) {
-		// Add the font size class.
-		$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: %s;',
-			wp_get_typography_font_size_value(
-				array(
-					'size' => $context['style']['typography']['fontSize'],
-				)
-			)
-		);
-	}
-
-	return $font_sizes;
-}
-
 /**
  * Outputs Page list markup from an array of pages with nested children.
  *
@@ -342,12 +306,21 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 		}
 	}
 
-	$colors          = block_core_page_list_build_css_colors( $attributes, $block->context );
-	$font_sizes      = block_core_page_list_build_css_font_sizes( $block->context );
-	$classes         = array_merge(
+	$colors = block_core_page_list_build_css_colors( $attributes, $block->context );
+	// The build system prefixes this function with "gutenberg_" to avoid
+	// collisions with the core version. Until this function is backported to
+	// core, we need to guard its use and only call the prefixed name in
+	// the plugin.
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		$font_sizes = gutenberg_block_core_shared_navigation_build_css_font_sizes( $block->context );
+	} else {
+		$font_sizes = block_core_shared_navigation_build_css_font_sizes( $block->context );
+	}
+	$classes = array_merge(
 		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
+
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
 	$css_classes     = trim( implode( ' ', $classes ) );
 

package/src/site-logo/edit.js

@@ -35,6 +35,7 @@ import {
 	store as blockEditorStore,
 	__experimentalImageEditor as ImageEditor,
 	useBlockEditingMode,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
@@ -46,9 +47,11 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import { MIN_SIZE } from '../image/constants';
 import { MediaControl, MediaControlPreview } from '../utils/media-control';
+import { unlock } from '../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
+const { mediaEditKey } = unlock( blockEditorPrivateApis );
 
 const SiteLogo = ( {
 	alt,
@@ -75,18 +78,22 @@ const SiteLogo = ( {
 	const blockEditingMode = useBlockEditingMode();
 	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 
-	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
-		const settings = select( blockEditorStore ).getSettings();
-		const siteEntities = select( coreStore ).getEntityRecord(
-			'root',
-			'__unstableBase'
-		);
-		return {
-			title: siteEntities?.name,
-			imageEditing: settings.imageEditing,
-			maxWidth: settings.maxWidth,
-		};
-	}, [] );
+	const { imageEditing, maxWidth, title, editMediaEntity } = useSelect(
+		( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			const siteEntities = select( coreStore ).getEntityRecord(
+				'root',
+				'__unstableBase'
+			);
+			return {
+				title: siteEntities?.name,
+				imageEditing: settings.imageEditing,
+				maxWidth: settings.maxWidth,
+				editMediaEntity: settings?.[ mediaEditKey ],
+			};
+		},
+		[]
+	);
 
 	useEffect( () => {
 		// Turn the `Use as site icon` toggle off if it is on but the logo and icon have
@@ -200,7 +207,11 @@ const SiteLogo = ( {
 	/* eslint-enable no-lonely-if */
 
 	const canEditImage =
-		logoId && naturalWidth && naturalHeight && imageEditing;
+		logoId &&
+		naturalWidth &&
+		naturalHeight &&
+		imageEditing &&
+		!! editMediaEntity;
 
 	// Hide crop and dimensions editing in write mode
 	const shouldShowCropAndDimensions = ! isContentOnlyMode;

package/src/site-tagline/deprecated.js

@@ -11,6 +11,7 @@ const v2 = {
 		},
 		level: {
 			type: 'number',
+			default: 0,
 		},
 		levelOptions: {
 			type: 'array',