@wordpress/block-library 8.35.0 → 9.0.0

package/build-style/theme.css

@@ -95,7 +95,7 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-:where(.wp-block-audio) {
+.wp-block-audio {
   margin: 0 0 1em 0;
 }
 
@@ -115,7 +115,7 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-:where(.wp-block-embed) {
+.wp-block-embed {
   margin: 0 0 1em 0;
 }
 
@@ -128,26 +128,25 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.wp-block-image figcaption {
+:root :where(.wp-block-image figcaption) {
   color: #555;
   font-size: 13px;
   text-align: center;
 }
-.is-dark-theme .wp-block-image figcaption {
+.is-dark-theme :root :where(.wp-block-image figcaption) {
   color: rgba(255, 255, 255, 0.65);
 }
 
-:where(.wp-block-image) {
+.wp-block-image {
   margin: 0 0 1em 0;
 }
 
-:where(.wp-block-pullquote) {
+.wp-block-pullquote {
   border-top: 4px solid currentColor;
   border-bottom: 4px solid currentColor;
   margin-bottom: 1.75em;
   color: currentColor;
 }
-
 .wp-block-pullquote cite,
 .wp-block-pullquote footer, .wp-block-pullquote__citation {
   color: currentColor;
@@ -156,29 +155,29 @@
   font-style: normal;
 }
 
-:where(.wp-block-quote) {
+.wp-block-quote {
   border-left: 0.25em solid currentColor;
   margin: 0 0 1.75em 0;
   padding-left: 1em;
 }
-:where(.wp-block-quote) cite,
-:where(.wp-block-quote) footer {
+.wp-block-quote cite,
+.wp-block-quote footer {
   color: currentColor;
   font-size: 0.8125em;
   position: relative;
   font-style: normal;
 }
-:where(.wp-block-quote).has-text-align-right {
+.wp-block-quote.has-text-align-right {
   border-left: none;
   border-right: 0.25em solid currentColor;
   padding-left: 0;
   padding-right: 1em;
 }
-:where(.wp-block-quote).has-text-align-center {
+.wp-block-quote.has-text-align-center {
   border: none;
   padding-left: 0;
 }
-:where(.wp-block-quote).is-style-plain, :where(.wp-block-quote).is-style-large, :where(.wp-block-quote).is-large {
+.wp-block-quote.is-style-plain, .wp-block-quote.is-style-large, .wp-block-quote.is-large {
   border: none;
 }
 
@@ -219,6 +218,9 @@
   height: 2px;
 }
 
+.wp-block-table {
+  margin: 0 0 1em 0;
+}
 .wp-block-table td,
 .wp-block-table th {
   word-break: normal;
@@ -232,10 +234,6 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-:where(.wp-block-table) {
-  margin: 0 0 1em 0;
-}
-
 .wp-block-video figcaption {
   color: #555;
   font-size: 13px;
@@ -245,11 +243,11 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-:where(.wp-block-video) {
+.wp-block-video {
   margin: 0 0 1em 0;
 }
 
-:where(.wp-block-template-part).has-background {
+:root :where(.wp-block-template-part.has-background) {
   padding: 1.25em 2.375em;
   margin-top: 0;
   margin-bottom: 0;

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

@@ -95,6 +95,6 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-:where(.wp-block-video) {
+.wp-block-video {
   margin: 0 0 1em 0;
 }

package/build-style/video/theme.css

@@ -95,6 +95,6 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-:where(.wp-block-video) {
+.wp-block-video {
   margin: 0 0 1em 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.35.0",
+	"version": "9.0.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -19,7 +19,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -31,39 +32,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.58.0",
-		"@wordpress/api-fetch": "^6.55.0",
-		"@wordpress/autop": "^3.58.0",
-		"@wordpress/blob": "^3.58.0",
-		"@wordpress/block-editor": "^12.26.0",
-		"@wordpress/blocks": "^12.35.0",
-		"@wordpress/components": "^27.6.0",
-		"@wordpress/compose": "^6.35.0",
-		"@wordpress/core-data": "^6.35.0",
-		"@wordpress/data": "^9.28.0",
-		"@wordpress/date": "^4.58.0",
-		"@wordpress/deprecated": "^3.58.0",
-		"@wordpress/dom": "^3.58.0",
-		"@wordpress/element": "^5.35.0",
-		"@wordpress/escape-html": "^2.58.0",
-		"@wordpress/hooks": "^3.58.0",
-		"@wordpress/html-entities": "^3.58.0",
-		"@wordpress/i18n": "^4.58.0",
-		"@wordpress/icons": "^9.49.0",
-		"@wordpress/interactivity": "^5.7.0",
-		"@wordpress/interactivity-router": "^1.8.0",
-		"@wordpress/keyboard-shortcuts": "^4.35.0",
-		"@wordpress/keycodes": "^3.58.0",
-		"@wordpress/notices": "^4.26.0",
-		"@wordpress/patterns": "^1.19.0",
-		"@wordpress/primitives": "^3.56.0",
-		"@wordpress/private-apis": "^0.40.0",
-		"@wordpress/reusable-blocks": "^4.35.0",
-		"@wordpress/rich-text": "^6.35.0",
-		"@wordpress/server-side-render": "^4.35.0",
-		"@wordpress/url": "^3.59.0",
-		"@wordpress/viewport": "^5.35.0",
-		"@wordpress/wordcount": "^3.58.0",
+		"@wordpress/a11y": "^4.0.0",
+		"@wordpress/api-fetch": "^7.0.0",
+		"@wordpress/autop": "^4.0.0",
+		"@wordpress/blob": "^4.0.0",
+		"@wordpress/block-editor": "^13.0.0",
+		"@wordpress/blocks": "^13.0.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/compose": "^7.0.0",
+		"@wordpress/core-data": "^7.0.0",
+		"@wordpress/data": "^10.0.0",
+		"@wordpress/date": "^5.0.0",
+		"@wordpress/deprecated": "^4.0.0",
+		"@wordpress/dom": "^4.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/escape-html": "^3.0.0",
+		"@wordpress/hooks": "^4.0.0",
+		"@wordpress/html-entities": "^4.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
+		"@wordpress/interactivity": "^6.0.0",
+		"@wordpress/interactivity-router": "^2.0.0",
+		"@wordpress/keyboard-shortcuts": "^5.0.0",
+		"@wordpress/keycodes": "^4.0.0",
+		"@wordpress/notices": "^5.0.0",
+		"@wordpress/patterns": "^2.0.0",
+		"@wordpress/primitives": "^4.0.0",
+		"@wordpress/private-apis": "^1.0.0",
+		"@wordpress/reusable-blocks": "^5.0.0",
+		"@wordpress/rich-text": "^7.0.0",
+		"@wordpress/server-side-render": "^5.0.0",
+		"@wordpress/url": "^4.0.0",
+		"@wordpress/viewport": "^6.0.0",
+		"@wordpress/wordcount": "^4.0.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -81,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

package/src/audio/edit.native.js

@@ -13,9 +13,9 @@ import {
 	ToggleControl,
 	ToolbarButton,
 	ToolbarGroup,
-	AudioPlayer,
 } from '@wordpress/components';
 import {
+	AudioPlayer,
 	BlockCaption,
 	BlockControls,
 	BlockIcon,

package/src/audio/theme.scss

@@ -2,6 +2,6 @@
 	@include caption-style-theme();
 }
 
-:where(.wp-block-audio) {
+.wp-block-audio {
 	margin: 0 0 1em 0;
 }

package/src/block/edit-title.native.js

@@ -6,7 +6,8 @@ import { Text, View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Icon, useGlobalStyles } from '@wordpress/components';
+import { Icon } from '@wordpress/components';
+import { useGlobalStyles } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { withPreferredColorScheme } from '@wordpress/compose';
 import { help, lock } from '@wordpress/icons';

package/src/block/edit.js

@@ -40,7 +40,8 @@ import { name as patternBlockName } from './index';
 import { unlock } from '../lock-unlock';
 
 const { useLayoutClasses } = unlock( blockEditorPrivateApis );
-const { isOverridableBlock } = unlock( patternsPrivateApis );
+const { isOverridableBlock, hasOverridableBlocks } =
+	unlock( patternsPrivateApis );
 
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
@@ -73,15 +74,6 @@ const useInferredLayout = ( blocks, parentLayout ) => {
 	}, [ blocks, parentLayout ] );
 };
 
-function hasOverridableBlocks( blocks ) {
-	return blocks.some( ( block ) => {
-		if ( isOverridableBlock( block ) ) {
-			return true;
-		}
-		return hasOverridableBlocks( block.innerBlocks );
-	} );
-}
-
 function setBlockEditMode( setEditMode, blocks, mode ) {
 	blocks.forEach( ( block ) => {
 		const editMode =

package/src/block/edit.native.js

@@ -232,7 +232,7 @@ export default function ReusableBlockEdit( {
 			<TouchableWithoutFeedback
 				disabled={ ! isSelected }
 				accessibilityLabel={ __( 'Help button' ) }
-				accessibilityRole={ 'button' }
+				accessibilityRole="button"
 				accessibilityHint={ __( 'Tap here to show help' ) }
 				onPress={ openSheet }
 			>

package/src/block/index.php

@@ -78,7 +78,7 @@ function render_block_core_block( $attributes ) {
 	 * filter so that it is available when a pattern's inner blocks are
 	 * rendering via do_blocks given it only receives the inner content.
 	 */
-	$has_pattern_overrides = isset( $attributes['content'] );
+	$has_pattern_overrides = isset( $attributes['content'] ) && null !== get_block_bindings_source( 'core/pattern-overrides' );
 	if ( $has_pattern_overrides ) {
 		$filter_block_context = static function ( $context ) use ( $attributes ) {
 			$context['pattern/overrides'] = $attributes['content'];

package/src/button/edit.js

@@ -156,6 +156,7 @@ function ButtonEdit( props ) {
 		onReplace,
 		mergeBlocks,
 		clientId,
+		context,
 	} = props;
 	const {
 		tagName,
@@ -246,11 +247,14 @@ function ButtonEdit( props ) {
 			return {
 				lockUrlControls:
 					!! metadata?.bindings?.url &&
-					( ! blockBindingsSource ||
-						blockBindingsSource?.lockAttributesEditing ),
+					! blockBindingsSource?.canUserEditValue( {
+						select,
+						context,
+						args: metadata?.bindings?.url?.args,
+					} ),
 			};
 		},
-		[ isSelected ]
+		[ isSelected, metadata?.bindings?.url ]
 	);
 
 	return (
@@ -339,7 +343,7 @@ function ButtonEdit( props ) {
 						} }
 						anchor={ popoverAnchor }
 						focusOnMount={ isEditingURL ? 'firstElement' : false }
-						__unstableSlotName={ '__unstable-block-tools-after' }
+						__unstableSlotName="__unstable-block-tools-after"
 						shift
 					>
 						<LinkControl

package/src/button/edit.native.js

@@ -17,6 +17,7 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -28,7 +29,6 @@ import {
 	BottomSheetSelectControl,
 	CSS_UNITS,
 	filterUnitsWithSettings,
-	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import { link } from '@wordpress/icons';
 // eslint-disable-next-line no-restricted-imports

package/src/button/editor.scss

@@ -37,38 +37,3 @@ div[data-type="core/button"] {
 	text-decoration: inherit;
 }
 
-.editor-styles-wrapper .wp-block-button .wp-block-button__link {
-	// The following styles ensure a default border is applied when the user selects only a border color or style in the editor,
-	// but no width. They override the `border-width: 0;` applied by core's theme.json via the Elements API button.
-	&:where(.has-border-color) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-color"]) {
-		border-top-width: initial;
-	}
-	&:where([style*="border-right-color"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-color"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-color"]) {
-		border-left-width: initial;
-	}
-
-	&:where([style*="border-style"]) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-style"]) {
-		border-top-width: initial;
-	}
-	&:where([style*="border-right-style"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-style"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-style"]) {
-		border-left-width: initial;
-	}
-}

package/src/button/style.scss

@@ -86,69 +86,37 @@ $blocks-block__margin: 0.5em;
 	}
 }
 
-// the first selector is required for old buttons markup
+// The follow block style selectors are required for old buttons markup
+// and do not use the `:root :where()` format to match specificity at
+// the time they were deprecated.
 .wp-block-button.is-style-squared,
 .wp-block-button__link.wp-block-button.is-style-squared {
 	border-radius: 0;
 }
-
-// the first selector is required for old buttons markup
 .wp-block-button.no-border-radius,
 .wp-block-button__link.no-border-radius {
 	border-radius: 0 !important;
 }
 
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link,
-.wp-block-button .wp-block-button__link:where(.is-style-outline) {
-	border: 2px solid currentColor;
-	padding: 0.667em 1.333em;
-}
-
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-text-color),
-.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-text-color) {
-	color: currentColor;
-}
-
-.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-background),
-.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-background) {
-	background-color: transparent;
-	// background-image is required to overwrite a gradient background
-	background-image: none;
-}
-
-.wp-block-button .wp-block-button__link {
-	// The following styles ensure a default border is applied when the user
-	// selects only a border color or style. This overcomes the zero border
-	// width applied by core's theme.json via the elements API.
-	&:where(.has-border-color) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-color"]) {
-		border-top-width: initial;
-	}
-	&:where([style*="border-right-color"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-color"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-color"]) {
-		border-left-width: initial;
+// Selectors here use the `:root :where()` format for maintaining compatibility
+// with global styles and nested block style variations.
+:root {
+	// Outline Block Style Variation.
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline) {
+		border: 2px solid currentColor;
+		padding: 0.667em 1.333em;
 	}
 
-	&:where([style*="border-style"]) {
-		border-width: initial;
-	}
-	&:where([style*="border-top-style"]) {
-		border-top-width: initial;
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)) {
+		color: currentColor;
 	}
-	&:where([style*="border-right-style"]) {
-		border-right-width: initial;
-	}
-	&:where([style*="border-bottom-style"]) {
-		border-bottom-width: initial;
-	}
-	&:where([style*="border-left-style"]) {
-		border-left-width: initial;
+
+	:where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)),
+	:where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)) {
+		background-color: transparent;
+		// background-image is required to overwrite a gradient background
+		background-image: none;
 	}
 }

package/src/columns/edit.native.js

@@ -13,7 +13,6 @@ import {
 	FooterMessageControl,
 	UnitControl,
 	getValueAndUnit,
-	GlobalStylesContext,
 	alignmentHelpers,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
@@ -25,12 +24,12 @@ import {
 	BlockVariationPicker,
 	useSettings,
 	store as blockEditorStore,
+	useGlobalStyles,
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
 import {
 	useEffect,
 	useState,
-	useContext,
 	useMemo,
 	useCallback,
 	memo,
@@ -90,7 +89,7 @@ function ColumnsEditContainer( {
 	const [ resizeListener, sizes ] = useResizeObserver();
 	const [ columnsInRow, setColumnsInRow ] = useState( MIN_COLUMNS_NUM );
 	const screenWidth = Math.floor( Dimensions.get( 'window' ).width );
-	const globalStyles = useContext( GlobalStylesContext );
+	const globalStyles = useGlobalStyles();
 
 	const { verticalAlignment, align } = attributes;
 	const { width } = sizes || {};

package/src/comments/index.php

@@ -18,7 +18,7 @@
  *
  * @since 6.1.0
  *
- * @global WP_Post  $post     Global post object.
+ * @global WP_Post $post Global post object.
  *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.

package/src/cover/block.json

@@ -85,6 +85,7 @@
 		"anchor": true,
 		"align": true,
 		"html": false,
+		"shadow": true,
 		"spacing": {
 			"padding": true,
 			"margin": [ "top", "bottom" ],

package/src/cover/controls.native.js

@@ -213,7 +213,7 @@ function Controls( {
 										videoRef?.current.seek( 0 );
 									} }
 									ref={ videoRef }
-									resizeMode={ 'cover' }
+									resizeMode="cover"
 									source={ { uri: url } }
 									style={ videoPreviewStyles }
 								/>
@@ -281,7 +281,7 @@ function Controls( {
 						value={ dimRatio }
 						onChange={ onOpacityChange }
 						style={ styles.rangeCellContainer }
-						separatorType={ 'topFullWidth' }
+						separatorType="topFullWidth"
 					/>
 				</PanelBody>
 			) : null }

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

@@ -79,7 +79,7 @@ function CoverHeightInput( {
 			min={ min }
 			onChange={ handleOnChange }
 			onUnitChange={ onUnitChange }
-			__unstableInputWidth={ '80px' }
+			__unstableInputWidth="80px"
 			units={ units }
 			value={ computedValue }
 		/>
@@ -211,7 +211,14 @@ export default function CoverInspectorControls( {
 								}
 								help={
 									<>
-										<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
+										<ExternalLink
+											href={
+												// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
+												__(
+													'https://www.w3.org/WAI/tutorials/images/decision-tree/'
+												)
+											}
+										>
 											{ __(
 												'Describe the purpose of the image.'
 											) }

package/src/cover/edit.native.js

@@ -33,7 +33,6 @@ import {
 	ColorPicker,
 	BottomSheetConsumer,
 	useConvertUnitToMobile,
-	useMobileGlobalStylesColors,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -47,6 +46,8 @@ import {
 	getColorObjectByAttributeValues,
 	getGradientValueBySlug,
 	store as blockEditorStore,
+	useGlobalStyles,
+	useMobileGlobalStylesColors,
 } from '@wordpress/block-editor';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
 import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
@@ -156,9 +157,11 @@ const Cover = ( {
 		mediaUploadSync();
 	}, [] );
 
+	const globalStyles = useGlobalStyles();
 	const convertedMinHeight = useConvertUnitToMobile(
 		minHeight || COVER_DEFAULT_HEIGHT,
-		minHeightUnit
+		minHeightUnit,
+		globalStyles
 	);
 
 	const isImage = backgroundType === MEDIA_TYPE_IMAGE;
@@ -218,6 +221,21 @@ const Cover = ( {
 		} );
 	};
 
+	const onUpdateMediaProgress = useCallback(
+		( payload ) => {
+			const { mediaUrl, state } = payload;
+
+			setIsUploadInProgress( true );
+
+			if ( isUploadInProgress && isImage && mediaUrl && ! state ) {
+				setAttributes( {
+					url: mediaUrl,
+				} );
+			}
+		},
+		[ isImage, isUploadInProgress, setAttributes ]
+	);
+
 	const onMediaPressed = () => {
 		if ( isUploadInProgress ) {
 			requestImageUploadCancelDialog( id );
@@ -447,9 +465,7 @@ const Cover = ( {
 					toolbarControls( openMediaOptionsRef.current ) }
 				<MediaUploadProgress
 					mediaId={ id }
-					onUpdateMediaProgress={ () => {
-						setIsUploadInProgress( true );
-					} }
+					onUpdateMediaProgress={ onUpdateMediaProgress }
 					onFinishMediaUploadWithSuccess={ ( {
 						mediaServerId,
 						mediaUrl,
@@ -496,7 +512,7 @@ const Cover = ( {
 						muted
 						disableFocus
 						repeat
-						resizeMode={ 'cover' }
+						resizeMode="cover"
 						source={ { uri: url } }
 						onLoad={ onVideoLoad }
 						onLoadStart={ onVideoLoadStart }

package/src/cover/editor.scss

@@ -123,10 +123,3 @@
 .color-block-support-panel__inner-wrapper > :not(.block-editor-tools-panel-color-gradient-settings__item) {
 	margin-top: $grid-unit-30;
 }
-
-
-// The frontend style.scss includes a min-height as an IE11 fix.
-// This fix causes extra spacing for the focus style in the editor, so we omit it here.
-.wp-block-cover::after {
-	min-height: auto;
-}