@wordpress/block-library 9.42.0 → 9.43.1-next.v.202604091042.0

package/src/home-link/index.php

@@ -5,6 +5,8 @@
  * @package WordPress
  */
 
+require_once __DIR__ . '/navigation-link/shared/build-css-font-sizes.php';
+
 /**
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the home link markup in the front-end.
@@ -59,36 +61,6 @@ function block_core_home_link_build_css_colors( $context ) {
 	return $colors;
 }
 
-/**
- * Build an array with CSS classes and inline styles defining the font sizes
- * which will be applied to the home link markup in the front-end.
- *
- * @since 6.0.0
- *
- * @param  array $context Home link block context.
- * @return array Font size CSS classes and inline styles.
- */
-function block_core_home_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;', $context['style']['typography']['fontSize'] );
-	}
-
-	return $font_sizes;
-}
-
 /**
  * Builds an array with classes and style for the li wrapper
  *
@@ -98,12 +70,21 @@ function block_core_home_link_build_css_font_sizes( $context ) {
  * @return string The li wrapper attributes.
  */
 function block_core_home_link_build_li_wrapper_attributes( $context ) {
-	$colors          = block_core_home_link_build_css_colors( $context );
-	$font_sizes      = block_core_home_link_build_css_font_sizes( $context );
-	$classes         = array_merge(
+	$colors = block_core_home_link_build_css_colors( $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 it's 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( $context );
+	} else {
+		$font_sizes = block_core_shared_navigation_build_css_font_sizes( $context );
+	}
+	$classes = array_merge(
 		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
+
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
 	$classes[]       = 'wp-block-navigation-item';
 

package/src/icon/edit.js

@@ -78,9 +78,7 @@ export function Edit( { attributes, setAttributes } ) {
 					? getEntityRecord( 'root', 'icon', icon )
 					: null,
 				allIcons: isInserterOpen
-					? getEntityRecords( 'root', 'icon', {
-							per_page: -1,
-					  } )
+					? getEntityRecords( 'root', 'icon' )
 					: undefined,
 			};
 		},

package/src/icon/editor.scss

@@ -1,6 +1,11 @@
 @use "@wordpress/base-styles/variables" as *;
 @use "@wordpress/base-styles/colors" as *;
 
+.wp-block[data-align="center"] > .wp-block-icon {
+	display: flex;
+	justify-content: center;
+}
+
 // Style for the icon library modal.
 .wp-block-icon__inserter {
 	padding: 0 $grid-unit-30;

package/src/image/editor.scss

@@ -52,6 +52,11 @@ figure.wp-block-image:not(.wp-block) {
 	}
 }
 
+// Disable any duotone filter applied in the selected state.
+.wp-block-image.is-selected .block-editor-media-placeholder {
+	filter: none !important;
+}
+
 .block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
 	position: absolute;
 	left: 0;

package/src/image/image.js

@@ -70,7 +70,9 @@ import {
 } from './constants';
 import { evalAspectRatio, mediaPosition } from './utils';
 
-const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis );
+const { DimensionsTool, ResolutionTool, mediaEditKey } = unlock(
+	blockEditorPrivateApis
+);
 
 const scaleOptions = [
 	{
@@ -342,7 +344,13 @@ export default function Image( {
 		[ id, isSingleSelected ]
 	);
 
-	const { canInsertCover, imageEditing, imageSizes, maxWidth } = useSelect(
+	const {
+		canInsertCover,
+		imageEditing,
+		imageSizes,
+		maxWidth,
+		editMediaEntity,
+	} = useSelect(
 		( select ) => {
 			const { getBlockRootClientId, canInsertBlockType, getSettings } =
 				select( blockEditorStore );
@@ -354,6 +362,7 @@ export default function Image( {
 				imageEditing: settings.imageEditing,
 				imageSizes: settings.imageSizes,
 				maxWidth: settings.maxWidth,
+				editMediaEntity: settings?.[ mediaEditKey ],
 				canInsertCover: canInsertBlockType(
 					'core/cover',
 					rootClientId
@@ -387,6 +396,9 @@ export default function Image( {
 		hasNonContentControls &&
 		! isWideAligned &&
 		isLargeViewport;
+	// An image is uploading if it has a temporary blob URL, or if it is
+	// being processed client-side (e.g. transcoded or generating sub-sizes).
+	const isUploading = !! temporaryURL || isSideloading;
 	const imageSizeOptions = imageSizes
 		.filter(
 			( { slug } ) => image?.media_details?.sizes?.[ slug ]?.source_url
@@ -550,7 +562,12 @@ export default function Image( {
 		}
 	}, [ isSingleSelected ] );
 
-	const canEditImage = id && naturalWidth && naturalHeight && imageEditing;
+	const canEditImage =
+		id &&
+		naturalWidth &&
+		naturalHeight &&
+		imageEditing &&
+		!! editMediaEntity;
 	const allowCrop =
 		isSingleSelected &&
 		canEditImage &&
@@ -762,6 +779,7 @@ export default function Image( {
 		id &&
 		isSingleSelected &&
 		canUserEdit &&
+		!! editMediaEntity &&
 		! isExternalImage( id, url ) &&
 		! isEditingImage &&
 		onNavigateToEntityRecord && (
@@ -870,9 +888,7 @@ export default function Image( {
 									onSelectURL={ onSelectURL }
 									onError={ onUploadError }
 									onReset={ () => onSelectImage( undefined ) }
-									isUploading={
-										!! temporaryURL || isSideloading
-									}
+									isUploading={ isUploading }
 									emptyLabel={ __( 'Add image' ) }
 								/>
 							</ToolsPanelItem>
@@ -1063,7 +1079,7 @@ export default function Image( {
 						...shadowProps.style,
 					} }
 				/>
-				{ ( temporaryURL || isSideloading ) && <Spinner /> }
+				{ isUploading && <Spinner /> }
 			</>
 		);
 
@@ -1095,6 +1111,7 @@ export default function Image( {
 		isResizable &&
 		isSingleSelected &&
 		! isEditingImage &&
+		! isUploading &&
 		! SIZED_LAYOUTS.includes( parentLayoutType )
 	) {
 		const numericRatio = aspectRatio && evalAspectRatio( aspectRatio );

package/src/image/index.php

@@ -205,8 +205,8 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
 		array(
 			'defaultAriaLabel' => __( 'Enlarged image' ),
 			'closeButtonText'  => esc_html__( 'Close' ),
-			'prevButtonText'   => esc_html__( 'Previous' ),
-			'nextButtonText'   => esc_html__( 'Next' ),
+			'prevButtonText'   => esc_html_x( 'Previous', 'previous image in lightbox' ),
+			'nextButtonText'   => esc_html_x( 'Next', 'next image in lightbox' ),
 		)
 	);
 
@@ -323,8 +323,8 @@ function block_core_image_render_lightbox( $block_content, $block, $block_instan
 function block_core_image_print_lightbox_overlay() {
 	$dialog_label      = esc_attr__( 'Enlarged images' );
 	$close_button_text = esc_attr__( 'Close' );
-	$prev_button_text  = esc_attr__( 'Previous' );
-	$next_button_text  = esc_attr__( 'Next' );
+	$prev_button_text  = esc_attr_x( 'Previous', 'previous image in lightbox' );
+	$next_button_text  = esc_attr_x( 'Next', 'next image in lightbox' );
 	$close_button_icon = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false"><path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path></svg>';
 	$prev_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" aria-hidden="true" focusable="false"><path d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z"></path></svg>';
 	$next_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="28" height="28" aria-hidden="true" focusable="false"><path d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z"></path></svg>';

package/src/latest-comments/deprecated.js

@@ -23,6 +23,39 @@ const v1 = {
 			default: true,
 		},
 	},
+	supports: {
+		align: true,
+		color: {
+			gradients: true,
+			link: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+				link: true,
+			},
+		},
+		html: false,
+		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,
+			},
+		},
+		interactivity: {
+			clientNavigation: true,
+		},
+	},
 	isEligible( attributes ) {
 		return attributes?.displayExcerpt === false;
 	},

package/src/list-item/block.json

@@ -21,6 +21,7 @@
 	},
 	"supports": {
 		"anchor": true,
+		"html": false,
 		"className": false,
 		"splitting": true,
 		"__experimentalBorder": {

package/src/loginout/index.php

@@ -38,6 +38,19 @@ function render_block_core_loginout( $attributes ) {
 
 		// Get the form.
 		$contents = wp_login_form( array( 'echo' => false ) );
+
+		if ( wp_is_block_theme() ) {
+			$processor = new WP_HTML_Tag_Processor( $contents );
+
+			while ( $processor->next_tag( 'input' ) ) {
+				if ( 'submit' === $processor->get_attribute( 'type' ) && 'wp-submit' === $processor->get_attribute( 'name' ) ) {
+					$processor->add_class( 'wp-block-button__link' );
+					$processor->add_class( wp_theme_get_element_class_name( 'button' ) );
+					$contents = $processor->get_updated_html();
+					break;
+				}
+			}
+		}
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );

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 {