@wordpress/block-library 9.6.1 → 9.7.1-next.1f6eadc42.0

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 {

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

@@ -14,7 +14,6 @@ import { embedContentIcon } from './icons';
 import EmbedLoading from './embed-loading';
 import EmbedPlaceholder from './embed-placeholder';
 import EmbedPreview from './embed-preview';
-import { Caption } from '../utils/caption';
 
 /**
  * External dependencies
@@ -277,14 +276,8 @@ const EmbedEdit = ( props ) => {
 					icon={ icon }
 					label={ label }
 					insertBlocksAfter={ insertBlocksAfter }
-				/>
-				<Caption
 					attributes={ attributes }
 					setAttributes={ setAttributes }
-					isSelected={ isSelected }
-					insertBlocksAfter={ insertBlocksAfter }
-					label={ __( 'Embed caption text' ) }
-					showToolbarButton={ isSelected }
 				/>
 			</View>
 		</>

package/src/embed/embed-placeholder.js

@@ -65,10 +65,18 @@ const EmbedPlaceholder = ( {
 						spacing={ 3 }
 						justify="flex-start"
 					>
-						<Button variant="secondary" onClick={ tryAgain }>
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ tryAgain }
+						>
 							{ _x( 'Try again', 'button label' ) }
 						</Button>{ ' ' }
-						<Button variant="secondary" onClick={ fallback }>
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ fallback }
+						>
 							{ _x( 'Convert to link', 'button label' ) }
 						</Button>
 					</HStack>

package/src/embed/embed-preview.js

@@ -21,6 +21,7 @@ import { getAuthority } from '@wordpress/url';
  * Internal dependencies
  */
 import WpEmbedPreview from './wp-embed-preview';
+import { Caption } from '../utils/caption';
 
 class EmbedPreview extends Component {
 	constructor() {
@@ -52,8 +53,19 @@ class EmbedPreview extends Component {
 	}
 
 	render() {
-		const { preview, previewable, url, type, className, icon, label } =
-			this.props;
+		const {
+			preview,
+			previewable,
+			url,
+			type,
+			className,
+			icon,
+			label,
+			insertBlocksAfter,
+			attributes,
+			setAttributes,
+			isSelected,
+		} = this.props;
 		const { scripts } = preview;
 		const { interactive } = this.state;
 
@@ -123,6 +135,14 @@ class EmbedPreview extends Component {
 						</p>
 					</Placeholder>
 				) }
+				<Caption
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					isSelected={ isSelected }
+					insertBlocksAfter={ insertBlocksAfter }
+					label={ __( 'Embed caption text' ) }
+					showToolbarButton={ isSelected }
+				/>
 			</figure>
 		);
 	}

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 }

package/src/file/index.php

@@ -21,7 +21,7 @@ function render_block_core_file( $attributes, $content ) {
 	if ( ! empty( $attributes['displayPreview'] ) ) {
 		$suffix = wp_scripts_get_suffix();
 		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build/interactivity/file.min.js' );
+			$module_url = gutenberg_url( '/build-module/block-library/file/view.min.js' );
 		}
 
 		wp_register_script_module(

package/src/file/transforms.js

@@ -24,12 +24,32 @@ const transforms = {
 					const blobURL = createBlobURL( file );
 
 					// File will be uploaded in componentDidMount()
-					blocks.push(
-						createBlock( 'core/file', {
-							blob: blobURL,
-							fileName: file.name,
-						} )
-					);
+					if ( file.type.startsWith( 'video/' ) ) {
+						blocks.push(
+							createBlock( 'core/video', {
+								blob: createBlobURL( file ),
+							} )
+						);
+					} else if ( file.type.startsWith( 'image/' ) ) {
+						blocks.push(
+							createBlock( 'core/image', {
+								blob: createBlobURL( file ),
+							} )
+						);
+					} else if ( file.type.startsWith( 'audio/' ) ) {
+						blocks.push(
+							createBlock( 'core/audio', {
+								blob: createBlobURL( file ),
+							} )
+						);
+					} else {
+						blocks.push(
+							createBlock( 'core/file', {
+								blob: blobURL,
+								fileName: file.name,
+							} )
+						);
+					}
 				} );
 
 				return blocks;