@wordpress/block-library 9.6.0 → 9.7.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.0",
+	"version": "9.7.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,39 +32,39 @@
 	],
 	"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.0",
+		"@wordpress/api-fetch": "^7.7.0",
+		"@wordpress/autop": "^4.7.0",
+		"@wordpress/blob": "^4.7.0",
+		"@wordpress/block-editor": "^14.2.0",
+		"@wordpress/blocks": "^13.7.0",
+		"@wordpress/components": "^28.7.0",
+		"@wordpress/compose": "^7.7.0",
+		"@wordpress/core-data": "^7.7.0",
+		"@wordpress/data": "^10.7.0",
+		"@wordpress/date": "^5.7.0",
+		"@wordpress/deprecated": "^4.7.0",
+		"@wordpress/dom": "^4.7.0",
+		"@wordpress/element": "^6.7.0",
+		"@wordpress/escape-html": "^3.7.0",
+		"@wordpress/hooks": "^4.7.0",
+		"@wordpress/html-entities": "^4.7.0",
+		"@wordpress/i18n": "^5.7.0",
+		"@wordpress/icons": "^10.7.0",
+		"@wordpress/interactivity": "^6.7.0",
+		"@wordpress/interactivity-router": "^2.7.0",
+		"@wordpress/keyboard-shortcuts": "^5.7.0",
+		"@wordpress/keycodes": "^4.7.0",
+		"@wordpress/notices": "^5.7.0",
+		"@wordpress/patterns": "^2.7.0",
+		"@wordpress/primitives": "^4.7.0",
+		"@wordpress/private-apis": "^1.7.0",
+		"@wordpress/reusable-blocks": "^5.7.0",
+		"@wordpress/rich-text": "^7.7.0",
+		"@wordpress/server-side-render": "^5.7.0",
+		"@wordpress/url": "^4.7.0",
+		"@wordpress/viewport": "^6.7.0",
+		"@wordpress/wordcount": "^4.7.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab9564947967bb3f00343130954b9efacba6cdd7"
+	"gitHead": "c90d920de07c53dff82c5914635b56fafa503b7f"
 }

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';
@@ -247,14 +248,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 +294,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/editor.scss

@@ -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/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-date/index.php

@@ -30,7 +30,7 @@ function render_block_core_comment_date( $attributes, $content, $block ) {
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
 	if ( isset( $attributes['format'] ) && 'human-diff' === $attributes['format'] ) {
 		// translators: %s: human-readable time difference.
-		$formatted_date = sprintf( __( '%s ago', 'gutenberg' ), human_time_diff( get_comment_date( 'U', $comment ) ) );
+		$formatted_date = sprintf( __( '%s ago' ), human_time_diff( get_comment_date( 'U', $comment ) ) );
 	} else {
 		$formatted_date = get_comment_date( empty( $attributes['format'] ) ? '' : $attributes['format'], $comment );
 	}

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,8 @@ export default function CommentsLegacy( {
 
 	const actions = [
 		<Button
+			// TODO: Switch to `true` (40px size) if possible
+			__next40pxDefaultSize={ false }
 			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/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

@@ -398,6 +398,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 {

package/src/cover/test/edit.js

@@ -155,6 +155,34 @@ describe( 'Cover block', () => {
 				'is-position-top-left'
 			);
 		} );
+
+		test( 'clears media when clear media button clicked', async () => {
+			await setup( {
+				url: 'http://localhost/my-image.jpg',
+			} );
+
+			await selectBlock( 'Block: Cover' );
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
+					'img'
+				)
+			).toBeInTheDocument();
+
+			await userEvent.click(
+				screen.getByRole( 'button', { name: 'Replace' } )
+			);
+			await userEvent.click(
+				screen.getByRole( 'menuitem', {
+					name: 'Reset',
+				} )
+			);
+
+			expect(
+				within( screen.getByLabelText( 'Block: Cover' ) ).queryByRole(
+					'img'
+				)
+			).not.toBeInTheDocument();
+		} );
 	} );
 
 	describe( 'Inspector controls', () => {
@@ -242,30 +270,6 @@ describe( 'Cover block', () => {
 			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();
 		} );
 
-		test( 'clears media  when clear media button clicked', async () => {
-			await setup( {
-				url: 'http://localhost/my-image.jpg',
-			} );
-
-			await selectBlock( 'Block: Cover' );
-			expect(
-				within( screen.getByLabelText( 'Block: Cover' ) ).getByRole(
-					'img'
-				)
-			).toBeInTheDocument();
-
-			await userEvent.click(
-				screen.getByRole( 'button', {
-					name: 'Clear Media',
-				} )
-			);
-			expect(
-				within( screen.getByLabelText( 'Block: Cover' ) ).queryByRole(
-					'img'
-				)
-			).not.toBeInTheDocument();
-		} );
-
 		describe( 'Color panel', () => {
 			test( 'applies selected opacity to block when number control value changed', async () => {
 				const { container } = await setup();
@@ -372,10 +376,10 @@ describe( 'Cover block', () => {
 					} )
 				);
 				await userEvent.clear(
-					screen.getByLabelText( 'Minimum height of cover' )
+					screen.getByLabelText( 'Minimum height' )
 				);
 				await userEvent.type(
-					screen.getByLabelText( 'Minimum height of cover' ),
+					screen.getByLabelText( 'Minimum height' ),
 					'300'
 				);
 

package/src/details/index.js

@@ -11,6 +11,7 @@ import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
@@ -35,6 +36,7 @@ export const settings = {
 	},
 	save,
 	edit,
+	transforms,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/details/transforms.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock, cloneBlock } from '@wordpress/blocks';
+
+export default {
+	from: [
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: [ '*' ],
+			isMatch( {}, blocks ) {
+				return ! (
+					blocks.length === 1 && blocks[ 0 ].name === 'core/details'
+				);
+			},
+			__experimentalConvert( blocks ) {
+				return createBlock(
+					'core/details',
+					{},
+					blocks.map( ( block ) => cloneBlock( block ) )
+				);
+			},
+		},
+	],
+};

package/src/embed/embed-placeholder.js

@@ -65,10 +65,20 @@ const EmbedPlaceholder = ( {
 						spacing={ 3 }
 						justify="flex-start"
 					>
-						<Button variant="secondary" onClick={ tryAgain }>
+						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
+							variant="secondary"
+							onClick={ tryAgain }
+						>
 							{ _x( 'Try again', 'button label' ) }
 						</Button>{ ' ' }
-						<Button variant="secondary" onClick={ fallback }>
+						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
+							variant="secondary"
+							onClick={ fallback }
+						>
 							{ _x( 'Convert to link', 'button label' ) }
 						</Button>
 					</HStack>

package/src/file/edit.js

@@ -109,6 +109,16 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	function onSelectFile( newMedia ) {
 		if ( ! newMedia || ! newMedia.url ) {
+			// Reset attributes.
+			setAttributes( {
+				href: undefined,
+				fileName: undefined,
+				textLinkHref: undefined,
+				id: undefined,
+				fileId: undefined,
+				displayPreview: undefined,
+				previewHeight: undefined,
+			} );
 			setTemporaryURL();
 			return;
 		}
@@ -230,6 +240,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 					accept="*"
 					onSelect={ onSelectFile }
 					onError={ onUploadError }
+					onReset={ () => onSelectFile( undefined ) }
 				/>
 				<ClipboardToolbarButton
 					text={ href }