@wordpress/block-library 9.6.1 → 9.7.1-next.5368f64a9.0

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

@@ -89,28 +89,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-video.wp-block-video.is-selected .components-placeholder {
-  color: #1e1e1e;
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-  border: none;
-  border-radius: 2px;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder > svg {
-  opacity: 0;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder .components-placeholder__illustration {
-  display: none;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder::before {
-  opacity: 0;
-}
-.wp-block-video.wp-block-video .components-placeholder__label,
-.wp-block-video.wp-block-video .components-placeholder__instructions,
-.wp-block-video.wp-block-video .components-button {
-  transition: none;
-}
-
 .wp-block[data-align=center] > .wp-block-video {
   text-align: center;
 }
@@ -156,16 +134,9 @@
 
 .block-library-video-tracks-editor > .components-popover__content {
   width: 360px;
-  padding: 0;
 }
 
 .block-library-video-tracks-editor__track-list .components-menu-group__label,
 .block-library-video-tracks-editor__add-tracks-container .components-menu-group__label {
   padding: 0;
-}
-
-.block-library-video-tracks-editor__single-track-editor,
-.block-library-video-tracks-editor__track-list,
-.block-library-video-tracks-editor__add-tracks-container {
-  padding: 12px;
 }

package/build-style/video/editor.css

@@ -89,28 +89,6 @@
 /**
  * Reset the WP Admin page styles for Gutenberg-like pages.
  */
-.wp-block-video.wp-block-video.is-selected .components-placeholder {
-  color: #1e1e1e;
-  background-color: #fff;
-  box-shadow: inset 0 0 0 1px #1e1e1e;
-  border: none;
-  border-radius: 2px;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder > svg {
-  opacity: 0;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder .components-placeholder__illustration {
-  display: none;
-}
-.wp-block-video.wp-block-video.is-selected .components-placeholder::before {
-  opacity: 0;
-}
-.wp-block-video.wp-block-video .components-placeholder__label,
-.wp-block-video.wp-block-video .components-placeholder__instructions,
-.wp-block-video.wp-block-video .components-button {
-  transition: none;
-}
-
 .wp-block[data-align=center] > .wp-block-video {
   text-align: center;
 }
@@ -156,16 +134,9 @@
 
 .block-library-video-tracks-editor > .components-popover__content {
   width: 360px;
-  padding: 0;
 }
 
 .block-library-video-tracks-editor__track-list .components-menu-group__label,
 .block-library-video-tracks-editor__add-tracks-container .components-menu-group__label {
   padding: 0;
-}
-
-.block-library-video-tracks-editor__single-track-editor,
-.block-library-video-tracks-editor__track-list,
-.block-library-video-tracks-editor__add-tracks-container {
-  padding: 12px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.6.1",
+	"version": "9.7.1-next.5368f64a9.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,41 +30,48 @@
 		"src/**/*.scss",
 		"{src,build,build-module}/*/init.js"
 	],
+	"wpScriptModuleExports": {
+		"./file/view": "./build-module/file/view.js",
+		"./image/view": "./build-module/image/view.js",
+		"./navigation/view": "./build-module/navigation/view.js",
+		"./query/view": "./build-module/query/view.js",
+		"./search/view": "./build-module/search/view.js"
+	},
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^4.6.0",
-		"@wordpress/api-fetch": "^7.6.0",
-		"@wordpress/autop": "^4.6.0",
-		"@wordpress/blob": "^4.6.0",
-		"@wordpress/block-editor": "^14.1.0",
-		"@wordpress/blocks": "^13.6.0",
-		"@wordpress/components": "^28.6.0",
-		"@wordpress/compose": "^7.6.0",
-		"@wordpress/core-data": "^7.6.0",
-		"@wordpress/data": "^10.6.0",
-		"@wordpress/date": "^5.6.0",
-		"@wordpress/deprecated": "^4.6.0",
-		"@wordpress/dom": "^4.6.0",
-		"@wordpress/element": "^6.6.0",
-		"@wordpress/escape-html": "^3.6.0",
-		"@wordpress/hooks": "^4.6.0",
-		"@wordpress/html-entities": "^4.6.0",
-		"@wordpress/i18n": "^5.6.0",
-		"@wordpress/icons": "^10.6.0",
-		"@wordpress/interactivity": "^6.6.0",
-		"@wordpress/interactivity-router": "^2.6.0",
-		"@wordpress/keyboard-shortcuts": "^5.6.0",
-		"@wordpress/keycodes": "^4.6.0",
-		"@wordpress/notices": "^5.6.0",
-		"@wordpress/patterns": "^2.6.0",
-		"@wordpress/primitives": "^4.6.0",
-		"@wordpress/private-apis": "^1.6.0",
-		"@wordpress/reusable-blocks": "^5.6.0",
-		"@wordpress/rich-text": "^7.6.0",
-		"@wordpress/server-side-render": "^5.6.0",
-		"@wordpress/url": "^4.6.0",
-		"@wordpress/viewport": "^6.6.0",
-		"@wordpress/wordcount": "^4.6.0",
+		"@wordpress/a11y": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/api-fetch": "^7.7.1-next.5368f64a9.0",
+		"@wordpress/autop": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/blob": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/block-editor": "^14.2.1-next.5368f64a9.0",
+		"@wordpress/blocks": "^13.7.1-next.5368f64a9.0",
+		"@wordpress/components": "^28.8.1-next.5368f64a9.0",
+		"@wordpress/compose": "^7.8.1-next.5368f64a9.0",
+		"@wordpress/core-data": "^7.7.1-next.5368f64a9.0",
+		"@wordpress/data": "^10.7.1-next.5368f64a9.0",
+		"@wordpress/date": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/deprecated": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/dom": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/element": "^6.7.1-next.5368f64a9.0",
+		"@wordpress/escape-html": "^3.7.1-next.5368f64a9.0",
+		"@wordpress/hooks": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/html-entities": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/i18n": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/icons": "^10.7.1-next.5368f64a9.0",
+		"@wordpress/interactivity": "^6.7.2-next.5368f64a9.0",
+		"@wordpress/interactivity-router": "^2.7.1-next.5368f64a9.0",
+		"@wordpress/keyboard-shortcuts": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/keycodes": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/notices": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/patterns": "^2.7.1-next.5368f64a9.0",
+		"@wordpress/primitives": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/private-apis": "^1.7.1-next.5368f64a9.0",
+		"@wordpress/reusable-blocks": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/rich-text": "^7.7.1-next.5368f64a9.0",
+		"@wordpress/server-side-render": "^5.7.1-next.5368f64a9.0",
+		"@wordpress/url": "^4.7.1-next.5368f64a9.0",
+		"@wordpress/viewport": "^6.7.1-next.5368f64a9.0",
+		"@wordpress/wordcount": "^4.7.1-next.5368f64a9.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -82,5 +89,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2c178a34c8ea9b1c0e51c1fd48e24da95c418f6e"
+	"gitHead": "24934a1f5251bbee15045d1fd953d9c5650317cd"
 }

package/src/archives/edit.js

@@ -53,7 +53,7 @@ export default function ArchivesEdit( { attributes, setAttributes } ) {
 					<SelectControl
 						__next40pxDefaultSize
 						__nextHasNoMarginBottom
-						label={ __( 'Group by:' ) }
+						label={ __( 'Group by' ) }
 						options={ [
 							{ label: __( 'Year' ), value: 'yearly' },
 							{ label: __( 'Month' ), value: 'monthly' },

package/src/audio/edit.js

@@ -155,6 +155,7 @@ function AudioEdit( {
 						onSelect={ onSelectAudio }
 						onSelectURL={ onSelectURL }
 						onError={ onUploadError }
+						onReset={ () => onSelectAudio( undefined ) }
 					/>
 				</BlockControls>
 			) }

package/src/block/edit.js

@@ -29,6 +29,7 @@ import {
 	privateApis as blockEditorPrivateApis,
 	store as blockEditorStore,
 	BlockControls,
+	InnerBlocks,
 } from '@wordpress/block-editor';
 import { privateApis as patternsPrivateApis } from '@wordpress/patterns';
 import { store as blocksStore } from '@wordpress/blocks';
@@ -193,19 +194,15 @@ function ReusableBlockEdit( {
 		hasPatternOverridesSource,
 	} = useSelect(
 		( select ) => {
-			const {
-				getBlocks,
-				getSettings,
-				getBlockEditingMode: _getBlockEditingMode,
-			} = select( blockEditorStore );
+			const { getBlocks, getSettings, getBlockEditingMode } =
+				select( blockEditorStore );
 			const { getBlockBindingsSource } = unlock( select( blocksStore ) );
 			// For editing link to the site editor if the theme and user permissions support it.
 			return {
 				innerBlocks: getBlocks( patternClientId ),
-				getBlockEditingMode: _getBlockEditingMode,
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
-				editingMode: _getBlockEditingMode( patternClientId ),
+				editingMode: getBlockEditingMode( patternClientId ),
 				hasPatternOverridesSource: !! getBlockBindingsSource(
 					'core/pattern-overrides'
 				),
@@ -247,14 +244,15 @@ function ReusableBlockEdit( {
 		),
 	} );
 
-	// Use `blocks` variable until `innerBlocks` is populated, which has the proper clientIds.
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		templateLock: 'all',
 		layout,
-		value: innerBlocks.length > 0 ? innerBlocks : blocks,
+		value: blocks,
 		onInput: NOOP,
 		onChange: NOOP,
-		renderAppender: blocks?.length ? undefined : blocks.ButtonBlockAppender,
+		renderAppender: blocks?.length
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
 	} );
 
 	const handleEditOriginal = () => {
@@ -292,7 +290,7 @@ function ReusableBlockEdit( {
 
 	return (
 		<>
-			{ hasResolved && (
+			{ hasResolved && ! isMissing && (
 				<ReusableBlockControl
 					recordId={ ref }
 					canOverrideBlocks={ canOverrideBlocks }

package/src/button/edit.js

@@ -254,7 +254,7 @@ function ButtonEdit( props ) {
 					} ),
 			};
 		},
-		[ isSelected, metadata?.bindings?.url ]
+		[ context, isSelected, metadata?.bindings?.url ]
 	);
 
 	return (

package/src/button/editor.scss

@@ -32,8 +32,3 @@
 div[data-type="core/button"] {
 	display: table;
 }
-
-.editor-styles-wrapper .wp-block-button[style*="text-decoration"] .wp-block-button__link {
-	text-decoration: inherit;
-}
-

package/src/buttons/block.json

@@ -21,7 +21,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": true,
+			"blockGap": [ "horizontal", "vertical" ],
 			"padding": true,
 			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {

package/src/buttons/editor.scss

@@ -33,14 +33,14 @@ $blocks-block__margin: 0.5em;
 	//
 	// This back compat rule is ignored if the user decides to use the
 	// newer justification options on the button block, hence the :not.
-	/* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
+	/* stylelint-disable @stylistic/indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 	&:not(
 		.is-content-justification-space-between,
 		.is-content-justification-right,
 		.is-content-justification-left,
 		.is-content-justification-center
 	) .wp-block[data-align="center"] {
-	/* stylelint-enable indentation */
+	/* stylelint-enable @stylistic/indentation */
 		margin-left: auto;
 		margin-right: auto;
 		margin-top: 0;
@@ -52,12 +52,6 @@ $blocks-block__margin: 0.5em;
 			margin-bottom: 0;
 		}
 	}
-
-	.editor-styles-wrapper &.has-custom-font-size {
-		.wp-block-button__link {
-			font-size: inherit;
-		}
-	}
 }
 
 .wp-block[data-align="center"] > .wp-block-buttons {

package/src/buttons/style.scss

@@ -55,14 +55,14 @@ $blocks-block__margin: 0.5em;
 	//
 	// This back compat rule is ignored if the user decides to use the
 	// newer justification options on the button block, hence the :not.
-	/* stylelint-disable indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
+	/* stylelint-disable @stylistic/indentation -- Disable the stylelint rule, otherwise this selector is ugly! */
 	&:not(
 		.is-content-justification-space-between,
 		.is-content-justification-right,
 		.is-content-justification-left,
 		.is-content-justification-center
 	) .wp-block-button.aligncenter {
-	/* stylelint-enable indentation */
+	/* stylelint-enable @stylistic/indentation */
 		margin-left: auto;
 		margin-right: auto;
 		width: 100%;

package/src/categories/block.json

@@ -36,6 +36,7 @@
 			"default": true
 		}
 	},
+	"usesContext": [ "enhancedPagination" ],
 	"supports": {
 		"align": true,
 		"html": false,

package/src/categories/index.php

@@ -9,12 +9,15 @@
  * Renders the `core/categories` block on server.
  *
  * @since 5.0.0
+ * @since 6.7.0 Enable client-side rendering if enhancedPagination context is true.
  *
- * @param array $attributes The block attributes.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
  *
  * @return string Returns the categories list/dropdown markup.
  */
-function render_block_core_categories( $attributes ) {
+function render_block_core_categories( $attributes, $content, $block ) {
 	static $block_id = 0;
 	++$block_id;
 
@@ -54,6 +57,14 @@ function render_block_core_categories( $attributes ) {
 		$wrapper_markup = '<ul %1$s>%2$s</ul>';
 		$items_markup   = wp_list_categories( $args );
 		$type           = 'list';
+
+		if ( ! empty( $block->context['enhancedPagination'] ) ) {
+			$p = new WP_HTML_Tag_Processor( $items_markup );
+			while ( $p->next_tag( 'a' ) ) {
+				$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
+			}
+			$items_markup = $p->get_updated_html();
+		}
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => "wp-block-categories-{$type}" ) );

package/src/comment-edit-link/block.json

@@ -30,7 +30,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -47,6 +51,13 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
-	}
+	},
+	"style": "wp-block-comment-edit-link"
 }

package/src/comment-edit-link/style.scss

@@ -0,0 +1,4 @@
+.wp-block-comment-edit-link {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/comment-reply-link/block.json

@@ -25,7 +25,11 @@
 		},
 		"spacing": {
 			"margin": true,
-			"padding": true
+			"padding": true,
+			"__experimentalDefaultControls": {
+				"margin": false,
+				"padding": false
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -40,6 +44,13 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
 		"html": false
-	}
+	},
+	"style": "wp-block-comment-reply-link"
 }

package/src/comment-reply-link/style.scss

@@ -0,0 +1,4 @@
+.wp-block-comment-reply-link {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/comments/edit/comments-legacy.js

@@ -29,6 +29,7 @@ export default function CommentsLegacy( {
 
 	const actions = [
 		<Button
+			__next40pxDefaultSize
 			key="convert"
 			onClick={ () => void setAttributes( { legacy: false } ) }
 			variant="primary"

package/src/comments-pagination/editor.scss

@@ -5,7 +5,7 @@ $pagination-margin: 0.5em;
 	justify-content: center;
 }
 
-.editor-styles-wrapper {
+:where(.editor-styles-wrapper) {
 	.wp-block-comments-pagination {
 		max-width: 100%;
 		&.block-editor-block-list__layout {

package/src/cover/deprecated.js

@@ -400,8 +400,9 @@ const v12 = {
 	supports: v12BlockSupports,
 	isEligible( attributes ) {
 		return (
-			attributes.customOverlayColor !== undefined ||
-			attributes.overlayColor !== undefined
+			( attributes.customOverlayColor !== undefined ||
+				attributes.overlayColor !== undefined ) &&
+			attributes.isUserOverlayColor === undefined
 		);
 	},
 	migrate( attributes ) {

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

@@ -26,6 +26,7 @@ export default function CoverBlockControls( {
 	onSelectMedia,
 	currentSettings,
 	toggleUseFeaturedImage,
+	onClearMedia,
 } ) {
 	const { contentPosition, id, useFeaturedImage, minHeight, minHeightUnit } =
 		attributes;
@@ -101,6 +102,7 @@ export default function CoverBlockControls( {
 					onToggleFeaturedImage={ toggleUseFeaturedImage }
 					useFeaturedImage={ useFeaturedImage }
 					name={ ! url ? __( 'Add Media' ) : __( 'Replace' ) }
+					onReset={ onClearMedia }
 				/>
 			</BlockControls>
 		</>

package/src/cover/edit/index.js

@@ -143,7 +143,10 @@ function CoverEdit( {
 				averageBackgroundColor
 			);
 			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { isDark: newIsDark } );
+			setAttributes( {
+				isDark: newIsDark,
+				isUserOverlayColor: isUserOverlayColor || false,
+			} );
 		} )();
 		// Disable reason: Update the block only when the featured image changes.
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -201,6 +204,7 @@ function CoverEdit( {
 			useFeaturedImage: undefined,
 			dimRatio: newDimRatio,
 			isDark: newIsDark,
+			isUserOverlayColor: isUserOverlayColor || false,
 		} );
 	};
 
@@ -398,6 +402,7 @@ function CoverEdit( {
 			onSelectMedia={ onSelectMedia }
 			currentSettings={ currentSettings }
 			toggleUseFeaturedImage={ toggleUseFeaturedImage }
+			onClearMedia={ onClearMedia }
 		/>
 	);
 

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

@@ -3,11 +3,9 @@
  */
 import { useMemo } from '@wordpress/element';
 import {
-	Button,
 	ExternalLink,
 	FocalPointPicker,
 	PanelBody,
-	PanelRow,
 	RangeControl,
 	TextareaControl,
 	ToggleControl,
@@ -73,13 +71,13 @@ function CoverHeightInput( {
 
 	return (
 		<UnitControl
-			label={ __( 'Minimum height of cover' ) }
+			__next40pxDefaultSize
+			label={ __( 'Minimum height' ) }
 			id={ inputId }
 			isResetValueOnUnitChange
 			min={ min }
 			onChange={ handleOnChange }
 			onUnitChange={ onUnitChange }
-			__unstableInputWidth="80px"
 			units={ units }
 			value={ computedValue }
 		/>
@@ -93,7 +91,6 @@ export default function CoverInspectorControls( {
 	coverRef,
 	currentSettings,
 	updateDimRatio,
-	onClearMedia,
 } ) {
 	const {
 		useFeaturedImage,
@@ -228,16 +225,6 @@ export default function CoverInspectorControls( {
 								}
 							/>
 						) }
-						<PanelRow>
-							<Button
-								variant="secondary"
-								size="small"
-								className="block-library-cover__reset-button"
-								onClick={ onClearMedia }
-							>
-								{ __( 'Clear Media' ) }
-							</Button>
-						</PanelRow>
 					</PanelBody>
 				) }
 			</InspectorControls>
@@ -299,6 +286,7 @@ export default function CoverInspectorControls( {
 			) }
 			<InspectorControls group="dimensions">
 				<ToolsPanelItem
+					className="single-column"
 					hasValue={ () => !! minHeight }
 					label={ __( 'Minimum height' ) }
 					onDeselect={ () =>

package/src/cover/editor.scss

@@ -1,9 +1,4 @@
 .wp-block-cover {
-	/* Extra specificity needed because the reset.css applied in the editor context is overriding this rule. */
-	.editor-styles-wrapper & {
-		box-sizing: border-box;
-	}
-
 	// Override default cover styles
 	// because we're not ready yet to show the cover block.
 	&.is-placeholder {