@wordpress/block-library 9.26.0 → 9.27.0

package/build-style/navigation/style-rtl.css

@@ -164,6 +164,7 @@
 }
 .wp-block-navigation .wp-block-navigation-item__content {
   display: block;
+  z-index: 1;
 }
 .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
   color: inherit;
@@ -254,6 +255,7 @@
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
   display: flex;
   flex-grow: 1;
+  padding: 0.5em 1em;
 }
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
   margin-left: 0;

package/build-style/navigation/style.css

@@ -164,6 +164,7 @@
 }
 .wp-block-navigation .wp-block-navigation-item__content {
   display: block;
+  z-index: 1;
 }
 .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
   color: inherit;
@@ -254,6 +255,7 @@
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
   display: flex;
   flex-grow: 1;
+  padding: 0.5em 1em;
 }
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
   margin-right: 0;

package/build-style/style-rtl.css

@@ -1180,7 +1180,7 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-blo
   padding: 0.5em 1em;
   display: inline-block;
 }
-:where(.wp-block-file__button):is(a):hover, :where(.wp-block-file__button):is(a):visited, :where(.wp-block-file__button):is(a):focus, :where(.wp-block-file__button):is(a):active {
+:where(.wp-block-file__button):where(a):hover, :where(.wp-block-file__button):where(a):visited, :where(.wp-block-file__button):where(a):focus, :where(.wp-block-file__button):where(a):active {
   box-shadow: none;
   color: #fff;
   opacity: 0.85;
@@ -2282,6 +2282,7 @@ ul {
 }
 .wp-block-navigation .wp-block-navigation-item__content {
   display: block;
+  z-index: 1;
 }
 .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
   color: inherit;
@@ -2372,6 +2373,7 @@ ul {
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
   display: flex;
   flex-grow: 1;
+  padding: 0.5em 1em;
 }
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
   margin-left: 0;

package/build-style/style.css

@@ -1188,7 +1188,7 @@ body:not(.editor-styles-wrapper) .wp-block-cover:not(.wp-block-cover:has(.wp-blo
   padding: 0.5em 1em;
   display: inline-block;
 }
-:where(.wp-block-file__button):is(a):hover, :where(.wp-block-file__button):is(a):visited, :where(.wp-block-file__button):is(a):focus, :where(.wp-block-file__button):is(a):active {
+:where(.wp-block-file__button):where(a):hover, :where(.wp-block-file__button):where(a):visited, :where(.wp-block-file__button):where(a):focus, :where(.wp-block-file__button):where(a):active {
   box-shadow: none;
   color: #fff;
   opacity: 0.85;
@@ -2312,6 +2312,7 @@ ul {
 }
 .wp-block-navigation .wp-block-navigation-item__content {
   display: block;
+  z-index: 1;
 }
 .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
   color: inherit;
@@ -2402,6 +2403,7 @@ ul {
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
   display: flex;
   flex-grow: 1;
+  padding: 0.5em 1em;
 }
 .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
   margin-right: 0;

package/build-style/video/editor-rtl.css

@@ -152,10 +152,6 @@
   margin-right: -9px;
 }
 
-.editor-video-poster-control .components-button {
-  margin-left: 8px;
-}
-
 .block-library-video-tracks-editor {
   z-index: 159990;
 }

package/build-style/video/editor.css

@@ -152,10 +152,6 @@
   margin-left: -9px;
 }
 
-.editor-video-poster-control .components-button {
-  margin-right: 8px;
-}
-
 .block-library-video-tracks-editor {
   z-index: 159990;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.26.0",
+	"version": "9.27.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,39 +41,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.26.0",
-		"@wordpress/api-fetch": "^7.26.0",
-		"@wordpress/autop": "^4.26.0",
-		"@wordpress/blob": "^4.26.0",
-		"@wordpress/block-editor": "^14.21.0",
-		"@wordpress/blocks": "^14.15.0",
-		"@wordpress/components": "^29.12.0",
-		"@wordpress/compose": "^7.26.0",
-		"@wordpress/core-data": "^7.26.0",
-		"@wordpress/data": "^10.26.0",
-		"@wordpress/date": "^5.26.0",
-		"@wordpress/deprecated": "^4.26.0",
-		"@wordpress/dom": "^4.26.0",
-		"@wordpress/element": "^6.26.0",
-		"@wordpress/escape-html": "^3.26.0",
-		"@wordpress/hooks": "^4.26.0",
-		"@wordpress/html-entities": "^4.26.0",
-		"@wordpress/i18n": "^5.26.0",
-		"@wordpress/icons": "^10.26.0",
-		"@wordpress/interactivity": "^6.26.0",
-		"@wordpress/interactivity-router": "^2.26.0",
-		"@wordpress/keyboard-shortcuts": "^5.26.0",
-		"@wordpress/keycodes": "^4.26.0",
-		"@wordpress/notices": "^5.26.0",
-		"@wordpress/patterns": "^2.26.0",
-		"@wordpress/primitives": "^4.26.0",
-		"@wordpress/private-apis": "^1.26.0",
-		"@wordpress/reusable-blocks": "^5.26.0",
-		"@wordpress/rich-text": "^7.26.0",
-		"@wordpress/server-side-render": "^6.2.0",
-		"@wordpress/url": "^4.26.0",
-		"@wordpress/viewport": "^6.26.0",
-		"@wordpress/wordcount": "^4.26.0",
+		"@wordpress/a11y": "^4.27.0",
+		"@wordpress/api-fetch": "^7.27.0",
+		"@wordpress/autop": "^4.27.0",
+		"@wordpress/blob": "^4.27.0",
+		"@wordpress/block-editor": "^15.0.0",
+		"@wordpress/blocks": "^15.0.0",
+		"@wordpress/components": "^30.0.0",
+		"@wordpress/compose": "^7.27.0",
+		"@wordpress/core-data": "^7.27.0",
+		"@wordpress/data": "^10.27.0",
+		"@wordpress/date": "^5.27.0",
+		"@wordpress/deprecated": "^4.27.0",
+		"@wordpress/dom": "^4.27.0",
+		"@wordpress/element": "^6.27.0",
+		"@wordpress/escape-html": "^3.27.0",
+		"@wordpress/hooks": "^4.27.0",
+		"@wordpress/html-entities": "^4.27.0",
+		"@wordpress/i18n": "^6.0.0",
+		"@wordpress/icons": "^10.27.0",
+		"@wordpress/interactivity": "^6.27.0",
+		"@wordpress/interactivity-router": "^2.27.0",
+		"@wordpress/keyboard-shortcuts": "^5.27.0",
+		"@wordpress/keycodes": "^4.27.0",
+		"@wordpress/notices": "^5.27.0",
+		"@wordpress/patterns": "^2.27.0",
+		"@wordpress/primitives": "^4.27.0",
+		"@wordpress/private-apis": "^1.27.0",
+		"@wordpress/reusable-blocks": "^5.27.0",
+		"@wordpress/rich-text": "^7.27.0",
+		"@wordpress/server-side-render": "^6.3.0",
+		"@wordpress/url": "^4.27.0",
+		"@wordpress/viewport": "^6.27.0",
+		"@wordpress/wordcount": "^4.27.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "35e26942820d8237771af0c58e45b4303f0497f1"
+	"gitHead": "abe06a6f2aef8d03c30ea9d5b3e133f041e523b1"
 }

package/src/archives/editor.scss

@@ -1,7 +1,3 @@
-ul.wp-block-archives {
-	padding-left: 2.5em;
-}
-
 // The following styles are to prevent duplicate spacing and borders for the archives
 // block in the editor given it uses server side rendering.
 // See https://github.com/WordPress/gutenberg/pull/63400

package/src/button/edit.js

@@ -159,7 +159,7 @@ function WidthPanel( { selectedWidth, setAttributes } ) {
 								key={ widthValue }
 								value={ widthValue }
 								label={ sprintf(
-									/* translators: Percentage value. */
+									/* translators: %d: Percentage value. */
 									__( '%d%%' ),
 									widthValue
 								) }

package/src/comments-pagination/index.php

@@ -25,10 +25,15 @@ function render_block_core_comments_pagination( $attributes, $content ) {
 	}
 
 	$classes            = ( isset( $attributes['style']['elements']['link']['color']['text'] ) ) ? 'has-link-color' : '';
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'aria-label' => __( 'Comments pagination' ),
+			'class'      => $classes,
+		)
+	);
 
 	return sprintf(
-		'<div %1$s>%2$s</div>',
+		'<nav %1$s>%2$s</nav>',
 		$wrapper_attributes,
 		$content
 	);

package/src/cover/block.json

@@ -81,6 +81,12 @@
 		},
 		"sizeSlug": {
 			"type": "string"
+		},
+		"poster": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "video",
+			"attribute": "poster"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

package/src/cover/edit/block-controls.js

@@ -27,6 +27,7 @@ export default function CoverBlockControls( {
 	currentSettings,
 	toggleUseFeaturedImage,
 	onClearMedia,
+	blockEditingMode,
 } ) {
 	const { contentPosition, id, useFeaturedImage, minHeight, minHeightUnit } =
 		attributes;
@@ -39,6 +40,8 @@ export default function CoverBlockControls( {
 		minHeightUnit === 'vh' &&
 		minHeight === 100 &&
 		! attributes?.style?.dimensions?.aspectRatio;
+	const isContentOnlyMode = blockEditingMode === 'contentOnly';
+
 	const toggleMinFullHeight = () => {
 		if ( isMinFullHeight ) {
 			// If there aren't previous values, take the default ones.
@@ -75,23 +78,25 @@ export default function CoverBlockControls( {
 
 	return (
 		<>
-			<BlockControls group="block">
-				<BlockAlignmentMatrixControl
-					label={ __( 'Change content position' ) }
-					value={ contentPosition }
-					onChange={ ( nextPosition ) =>
-						setAttributes( {
-							contentPosition: nextPosition,
-						} )
-					}
-					isDisabled={ ! hasInnerBlocks }
-				/>
-				<FullHeightAlignmentControl
-					isActive={ isMinFullHeight }
-					onToggle={ toggleMinFullHeight }
-					isDisabled={ ! hasInnerBlocks }
-				/>
-			</BlockControls>
+			{ ! isContentOnlyMode && (
+				<BlockControls group="block">
+					<BlockAlignmentMatrixControl
+						label={ __( 'Change content position' ) }
+						value={ contentPosition }
+						onChange={ ( nextPosition ) =>
+							setAttributes( {
+								contentPosition: nextPosition,
+							} )
+						}
+						isDisabled={ ! hasInnerBlocks }
+					/>
+					<FullHeightAlignmentControl
+						isActive={ isMinFullHeight }
+						onToggle={ toggleMinFullHeight }
+						isDisabled={ ! hasInnerBlocks }
+					/>
+				</BlockControls>
+			) }
 			<BlockControls group="other">
 				<MediaReplaceFlow
 					mediaId={ id }

package/src/cover/edit/index.js

@@ -102,6 +102,7 @@ function CoverEdit( {
 		tagName: TagName = 'div',
 		isUserOverlayColor,
 		sizeSlug,
+		poster,
 	} = attributes;
 
 	const [ featuredImage ] = useEntityProp(
@@ -324,7 +325,7 @@ function CoverEdit( {
 	const [ resizeListener, { height, width } ] = useResizeObserver();
 	const resizableBoxDimensions = useMemo( () => {
 		return {
-			height: minHeightUnit === 'px' ? minHeight : 'auto',
+			height: minHeightUnit === 'px' && minHeight ? minHeight : 'auto',
 			width: 'auto',
 		};
 	}, [ minHeight, minHeightUnit ] );
@@ -446,6 +447,7 @@ function CoverEdit( {
 			currentSettings={ currentSettings }
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
 			onClearMedia={ onClearMedia }
+			blockEditingMode={ blockEditingMode }
 		/>
 	);
 
@@ -589,6 +591,7 @@ function CoverEdit( {
 						muted
 						loop
 						src={ url }
+						poster={ poster }
 						style={ mediaStyle }
 					/>
 				) }

package/src/cover/edit/inspector-controls.js

@@ -35,6 +35,7 @@ import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 import { DEFAULT_MEDIA_SIZE_SLUG } from '../constants';
+import PosterImage from './poster-image';
 
 const { cleanEmptyObject, ResolutionTool, HTMLElementControl } = unlock(
 	blockEditorPrivateApis
@@ -110,6 +111,7 @@ export default function CoverInspectorControls( {
 		minHeightUnit,
 		alt,
 		tagName,
+		poster,
 	} = attributes;
 	const {
 		isVideoBackground,
@@ -198,8 +200,9 @@ export default function CoverInspectorControls( {
 								focalPoint: undefined,
 								isRepeated: false,
 								alt: '',
-								sizeSlug: undefined,
+								poster: undefined,
 							} );
+							updateImage( DEFAULT_MEDIA_SIZE_SLUG );
 						} }
 						dropdownMenuProps={ dropdownMenuProps }
 					>
@@ -208,7 +211,7 @@ export default function CoverInspectorControls( {
 								<ToolsPanelItem
 									label={ __( 'Fixed background' ) }
 									isShownByDefault
-									hasValue={ () => hasParallax }
+									hasValue={ () => !! hasParallax }
 									onDeselect={ () =>
 										setAttributes( {
 											hasParallax: false,
@@ -219,7 +222,7 @@ export default function CoverInspectorControls( {
 									<ToggleControl
 										__nextHasNoMarginBottom
 										label={ __( 'Fixed background' ) }
-										checked={ hasParallax }
+										checked={ !! hasParallax }
 										onChange={ toggleParallax }
 									/>
 								</ToolsPanelItem>
@@ -269,6 +272,12 @@ export default function CoverInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
+						{ isVideoBackground && (
+							<PosterImage
+								poster={ poster }
+								setAttributes={ setAttributes }
+							/>
+						) }
 						{ ! useFeaturedImage && url && ! isVideoBackground && (
 							<ToolsPanelItem
 								label={ __( 'Alternative text' ) }

package/src/cover/edit/poster-image.js

@@ -0,0 +1,91 @@
+/**
+ * WordPress dependencies
+ */
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import {
+	Button,
+	BaseControl,
+	__experimentalHStack as HStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
+
+const COVER_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+function PosterImage( { poster, setAttributes } ) {
+	const posterButtonRef = useRef();
+	const descriptionId = useInstanceId(
+		PosterImage,
+		'cover-block__poster-image-description'
+	);
+
+	function onSelectPoster( image ) {
+		setAttributes( { poster: image.url } );
+	}
+
+	function onRemovePoster() {
+		setAttributes( { poster: undefined } );
+
+		// Move focus back to the Media Upload button.
+		posterButtonRef.current.focus();
+	}
+
+	return (
+		<MediaUploadCheck>
+			<ToolsPanelItem
+				label={ __( 'Poster image' ) }
+				isShownByDefault
+				hasValue={ () => !! poster }
+				onDeselect={ () => {
+					setAttributes( { poster: undefined } );
+				} }
+			>
+				<BaseControl.VisualLabel>
+					{ __( 'Poster image' ) }
+				</BaseControl.VisualLabel>
+				<HStack justify="flex-start">
+					<MediaUpload
+						title={ __( 'Select poster image' ) }
+						onSelect={ onSelectPoster }
+						allowedTypes={ COVER_POSTER_ALLOWED_MEDIA_TYPES }
+						render={ ( { open } ) => (
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								onClick={ open }
+								ref={ posterButtonRef }
+								aria-describedby={ descriptionId }
+							>
+								{ ! poster ? __( 'Select' ) : __( 'Replace' ) }
+							</Button>
+						) }
+					/>
+					<p id={ descriptionId } hidden>
+						{ poster
+							? sprintf(
+									/* translators: %s: poster image URL. */
+									__( 'The current poster image url is %s.' ),
+									poster
+							  )
+							: __(
+									'There is no poster image currently selected.'
+							  ) }
+					</p>
+					{ !! poster && (
+						<Button
+							__next40pxDefaultSize
+							onClick={ onRemovePoster }
+							variant="tertiary"
+						>
+							{ __( 'Remove' ) }
+						</Button>
+					) }
+				</HStack>
+			</ToolsPanelItem>
+		</MediaUploadCheck>
+	);
+}
+
+export default PosterImage;

package/src/cover/save.js

@@ -46,6 +46,7 @@ export default function save( { attributes } ) {
 		minHeightUnit,
 		tagName: Tag,
 		sizeSlug,
+		poster,
 	} = attributes;
 	const overlayColorClass = getColorClassName(
 		'background-color',
@@ -137,6 +138,7 @@ export default function save( { attributes } ) {
 					loop
 					playsInline
 					src={ url }
+					poster={ poster }
 					style={ { objectPosition } }
 					data-object-fit="cover"
 					data-object-position={ objectPosition }

package/src/details/index.js

@@ -50,7 +50,7 @@ export const settings = {
 			return ! hasSummary
 				? __( 'Details. Empty.' )
 				: sprintf(
-						/* translators: accessibility text; summary title. */
+						/* translators: %s: accessibility text; summary title. */
 						__( 'Details. %s' ),
 						summary
 				  );

package/src/file/style.scss

@@ -35,7 +35,7 @@
 	padding: 0.5em 1em;
 	display: inline-block;
 
-	&:is(a) {
+	&:where(a) {
 		&:hover,
 		&:visited,
 		&:focus,

package/src/gallery/constants.js

@@ -4,3 +4,4 @@ export const LINK_DESTINATION_LIGHTBOX = 'lightbox';
 export const LINK_DESTINATION_ATTACHMENT = 'attachment';
 export const LINK_DESTINATION_MEDIA_WP_CORE = 'file';
 export const LINK_DESTINATION_ATTACHMENT_WP_CORE = 'post';
+export const DEFAULT_MEDIA_SIZE_SLUG = 'large';