@wordpress/block-library 9.26.1-next.719a03cbe.0 → 9.27.1-next.46f643fa0.0

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/build-style/video/style-rtl.css

@@ -139,6 +139,7 @@
 }
 .wp-block-video video {
   width: 100%;
+  height: auto;
   vertical-align: middle;
 }
 @supports (position: sticky) {

package/build-style/video/style.css

@@ -139,6 +139,7 @@
 }
 .wp-block-video video {
   width: 100%;
+  height: auto;
   vertical-align: middle;
 }
 @supports (position: sticky) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.26.1-next.719a03cbe.0",
+	"version": "9.27.1-next.46f643fa0.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.1-next.719a03cbe.0",
-		"@wordpress/api-fetch": "^7.26.1-next.719a03cbe.0",
-		"@wordpress/autop": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/blob": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/block-editor": "^14.21.1-next.719a03cbe.0",
-		"@wordpress/blocks": "^14.15.1-next.719a03cbe.0",
-		"@wordpress/components": "^29.13.1-next.719a03cbe.0",
-		"@wordpress/compose": "^7.26.1-next.719a03cbe.0",
-		"@wordpress/core-data": "^7.26.1-next.719a03cbe.0",
-		"@wordpress/data": "^10.26.1-next.719a03cbe.0",
-		"@wordpress/date": "^5.26.1-next.719a03cbe.0",
-		"@wordpress/deprecated": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/dom": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/element": "^6.26.1-next.719a03cbe.0",
-		"@wordpress/escape-html": "^3.26.1-next.719a03cbe.0",
-		"@wordpress/hooks": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/html-entities": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/i18n": "^6.0.1-next.719a03cbe.0",
-		"@wordpress/icons": "^10.26.2-next.719a03cbe.0",
-		"@wordpress/interactivity": "^6.26.1-next.719a03cbe.0",
-		"@wordpress/interactivity-router": "^2.26.1-next.719a03cbe.0",
-		"@wordpress/keyboard-shortcuts": "^5.26.1-next.719a03cbe.0",
-		"@wordpress/keycodes": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/notices": "^5.26.1-next.719a03cbe.0",
-		"@wordpress/patterns": "^2.26.1-next.719a03cbe.0",
-		"@wordpress/primitives": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/private-apis": "^1.26.1-next.719a03cbe.0",
-		"@wordpress/reusable-blocks": "^5.26.1-next.719a03cbe.0",
-		"@wordpress/rich-text": "^7.26.1-next.719a03cbe.0",
-		"@wordpress/server-side-render": "^6.2.1-next.719a03cbe.0",
-		"@wordpress/url": "^4.26.1-next.719a03cbe.0",
-		"@wordpress/viewport": "^6.26.1-next.719a03cbe.0",
-		"@wordpress/wordcount": "^4.26.1-next.719a03cbe.0",
+		"@wordpress/a11y": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/api-fetch": "^7.27.1-next.46f643fa0.0",
+		"@wordpress/autop": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/blob": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/block-editor": "^15.0.1-next.46f643fa0.0",
+		"@wordpress/blocks": "^15.0.1-next.46f643fa0.0",
+		"@wordpress/components": "^30.1.1-next.46f643fa0.0",
+		"@wordpress/compose": "^7.27.1-next.46f643fa0.0",
+		"@wordpress/core-data": "^7.27.1-next.46f643fa0.0",
+		"@wordpress/data": "^10.27.1-next.46f643fa0.0",
+		"@wordpress/date": "^5.27.1-next.46f643fa0.0",
+		"@wordpress/deprecated": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/dom": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/element": "^6.27.1-next.46f643fa0.0",
+		"@wordpress/escape-html": "^3.27.1-next.46f643fa0.0",
+		"@wordpress/hooks": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/html-entities": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/i18n": "^6.0.1-next.46f643fa0.0",
+		"@wordpress/icons": "^10.27.2-next.46f643fa0.0",
+		"@wordpress/interactivity": "^6.28.1-next.46f643fa0.0",
+		"@wordpress/interactivity-router": "^2.27.1-next.46f643fa0.0",
+		"@wordpress/keyboard-shortcuts": "^5.27.1-next.46f643fa0.0",
+		"@wordpress/keycodes": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/notices": "^5.27.1-next.46f643fa0.0",
+		"@wordpress/patterns": "^2.27.1-next.46f643fa0.0",
+		"@wordpress/primitives": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/private-apis": "^1.27.1-next.46f643fa0.0",
+		"@wordpress/reusable-blocks": "^5.27.1-next.46f643fa0.0",
+		"@wordpress/rich-text": "^7.27.1-next.46f643fa0.0",
+		"@wordpress/server-side-render": "^6.4.1-next.46f643fa0.0",
+		"@wordpress/url": "^4.27.1-next.46f643fa0.0",
+		"@wordpress/viewport": "^6.27.1-next.46f643fa0.0",
+		"@wordpress/wordcount": "^4.27.1-next.46f643fa0.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5e146e949c2765411a8310bcc2641a88d036a6d9"
+	"gitHead": "17e600e091675c5e3d809adfea23ac456bbeae19"
 }

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/categories/edit.js

@@ -25,6 +25,8 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { __, sprintf } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
 import { useEntityRecords } from '@wordpress/core-data';
+import { useDispatch } from '@wordpress/data';
+import { store as noticeStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -44,6 +46,7 @@ export default function CategoriesEdit( {
 	},
 	setAttributes,
 	className,
+	clientId,
 } ) {
 	const selectId = useInstanceId( CategoriesEdit, 'blocks-category-select' );
 
@@ -70,6 +73,15 @@ export default function CategoriesEdit( {
 		query
 	);
 
+	const { createWarningNotice } = useDispatch( noticeStore );
+	const showRedirectionPreventedNotice = ( event ) => {
+		event.preventDefault();
+		createWarningNotice( __( 'Links are disabled in the editor.' ), {
+			id: `block-library/core/categories/redirection-prevented/${ clientId }`,
+			type: 'snackbar',
+		} );
+	};
+
 	const getCategoriesList = ( parentId ) => {
 		if ( ! categories?.length ) {
 			return [];
@@ -99,7 +111,7 @@ export default function CategoriesEdit( {
 		const { id, link, count, name } = category;
 		return (
 			<li key={ id } className={ `cat-item cat-item-${ id }` }>
-				<a href={ link } target="_blank" rel="noreferrer noopener">
+				<a href={ link } onClick={ showRedirectionPreventedNotice }>
 					{ renderCategoryName( name ) }
 				</a>
 				{ showPostCounts && ` (${ count })` }

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 '../../utils/poster-image';
 
 const { cleanEmptyObject, ResolutionTool, HTMLElementControl } = unlock(
 	blockEditorPrivateApis
@@ -110,6 +111,7 @@ export default function CoverInspectorControls( {
 		minHeightUnit,
 		alt,
 		tagName,
+		poster,
 	} = attributes;
 	const {
 		isVideoBackground,
@@ -198,6 +200,7 @@ export default function CoverInspectorControls( {
 								focalPoint: undefined,
 								isRepeated: false,
 								alt: '',
+								poster: undefined,
 							} );
 							updateImage( DEFAULT_MEDIA_SIZE_SLUG );
 						} }
@@ -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,16 @@ export default function CoverInspectorControls( {
 								/>
 							</ToolsPanelItem>
 						) }
+						{ isVideoBackground && (
+							<PosterImage
+								poster={ poster }
+								onChange={ ( posterImage ) =>
+									setAttributes( {
+										poster: posterImage?.url,
+									} )
+								}
+							/>
+						) }
 						{ ! useFeaturedImage && url && ! isVideoBackground && (
 							<ToolsPanelItem
 								label={ __( 'Alternative text' ) }

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/editor.scss

@@ -54,6 +54,7 @@
 @import "./post-featured-image/editor.scss";
 @import "./post-comments-form/editor.scss";
 @import "./editor-elements.scss";
+@import "./utils/poster-image.scss";
 
 :root .editor-styles-wrapper {
 	@include background-colors-deprecated();

package/src/file/edit.js

@@ -29,6 +29,7 @@ import { __, _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
+import { getFilename } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -127,7 +128,9 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			return;
 		}
 
-		const isPdf = newMedia.url.endsWith( '.pdf' );
+		const isPdf = getFilename( newMedia.url )
+			.toLowerCase()
+			.endsWith( '.pdf' );
 		const pdfAttributes = {
 			displayPreview: isPdf
 				? attributes.displayPreview ?? true

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/latest-posts/edit.js

@@ -774,7 +774,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 									{ addLinkToFeaturedImage ? (
 										<a
 											href={ post.link }
-											rel="noreferrer noopener"
 											onClick={
 												showRedirectionPreventedNotice
 											}
@@ -789,7 +788,6 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
 							<a
 								className="wp-block-latest-posts__post-title"
 								href={ post.link }
-								rel="noreferrer noopener"
 								dangerouslySetInnerHTML={
 									!! titleTrimmed
 										? {

package/src/media-text/edit.js

@@ -317,8 +317,8 @@ function MediaTextEdit( {
 					mediaAlt: '',
 					focalPoint: undefined,
 					mediaWidth: 50,
-					mediaSizeSlug: undefined,
 				} );
+				updateImage( DEFAULT_MEDIA_SIZE_SLUG );
 			} }
 			dropdownMenuProps={ dropdownMenuProps }
 		>

package/src/navigation/style.scss

@@ -182,6 +182,7 @@ $navigation-icon-size: 24px;
 			> .wp-block-navigation-item__content {
 				display: flex;
 				flex-grow: 1;
+				padding: 0.5em 1em;
 
 				// Right-align the chevron in submenus.
 				.wp-block-navigation__submenu-icon {

package/src/navigation-link/edit.js

@@ -175,8 +175,9 @@ function getMissingText( type ) {
  * packages/block-library/src/navigation-submenu/edit.js
  * Consider reusing this components for both blocks.
  */
-function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
+function Controls( { attributes, setAttributes, setIsEditingControl } ) {
 	const { label, url, description, rel, opensInNewTab } = attributes;
+	const lastURLRef = useRef( url );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	return (
 		<ToolsPanel
@@ -187,6 +188,7 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 					url: '',
 					description: '',
 					rel: '',
+					opensInNewTab: false,
 				} );
 			} }
 			dropdownMenuProps={ dropdownMenuProps }
@@ -206,8 +208,8 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 						setAttributes( { label: labelValue } );
 					} }
 					autoComplete="off"
-					onFocus={ () => setIsLabelFieldFocused( true ) }
-					onBlur={ () => setIsLabelFieldFocused( false ) }
+					onFocus={ () => setIsEditingControl( true ) }
+					onBlur={ () => setIsEditingControl( false ) }
 				/>
 			</ToolsPanelItem>
 
@@ -223,14 +225,25 @@ function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) {
 					label={ __( 'Link' ) }
 					value={ url ? safeDecodeURI( url ) : '' }
 					onChange={ ( urlValue ) => {
+						setAttributes( {
+							url: encodeURI( safeDecodeURI( urlValue ) ),
+						} );
+					} }
+					autoComplete="off"
+					type="url"
+					onFocus={ () => {
+						lastURLRef.current = url;
+						setIsEditingControl( true );
+					} }
+					onBlur={ () => {
+						// Defer the updateAttributes call to ensure entity connection isn't severed by accident.
 						updateAttributes(
-							{ url: urlValue },
+							{ url: ! url ? lastURLRef.current : url },
 							setAttributes,
-							attributes
+							{ ...attributes, url: lastURLRef.current }
 						);
+						setIsEditingControl( false );
 					} }
-					autoComplete="off"
-					type="url"
 				/>
 			</ToolsPanelItem>
 
@@ -326,9 +339,10 @@ export default function NavigationLinkEdit( {
 	const linkUIref = useRef();
 	const prevUrl = usePrevious( url );
 
-	// Change the label using inspector causes rich text to change focus on firefox.
-	// This is a workaround to keep the focus on the label field when label filed is focused we don't render the rich text.
-	const [ isLabelFieldFocused, setIsLabelFieldFocused ] = useState( false );
+	// Change the `label` and `url` using inspector causes RichText to change focus.
+	// This is a workaround to keep the focus on the field when it's focused we don't render the RichText.
+	// See: https://github.com/WordPress/gutenberg/pull/61374.
+	const [ isEditingControl, setIsEditingControl ] = useState( false );
 
 	const {
 		isAtMaxNesting,
@@ -563,14 +577,14 @@ export default function NavigationLinkEdit( {
 				<Controls
 					attributes={ attributes }
 					setAttributes={ setAttributes }
-					setIsLabelFieldFocused={ setIsLabelFieldFocused }
+					setIsEditingControl={ setIsEditingControl }
 				/>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ /* eslint-disable jsx-a11y/anchor-is-valid */ }
 				<a className={ classes }>
 					{ /* eslint-enable */ }
-					{ ! url ? (
+					{ ! url && ! isEditingControl ? (
 						<div className="wp-block-navigation-link__placeholder-text">
 							<span>{ missingText }</span>
 						</div>
@@ -578,7 +592,7 @@ export default function NavigationLinkEdit( {
 						<>
 							{ ! isInvalid &&
 								! isDraft &&
-								! isLabelFieldFocused && (
+								! isEditingControl && (
 									<>
 										<RichText
 											ref={ ref }
@@ -612,9 +626,7 @@ export default function NavigationLinkEdit( {
 										) }
 									</>
 								) }
-							{ ( isInvalid ||
-								isDraft ||
-								isLabelFieldFocused ) && (
+							{ ( isInvalid || isDraft || isEditingControl ) && (
 								<div
 									className={ clsx(
 										'wp-block-navigation-link__placeholder-text',