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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.7.0",
+	"version": "9.7.1-next.1f6eadc42.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.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",
+		"@wordpress/a11y": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/api-fetch": "^7.7.1-next.1f6eadc42.0",
+		"@wordpress/autop": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/blob": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/block-editor": "^14.2.1-next.1f6eadc42.0",
+		"@wordpress/blocks": "^13.7.1-next.1f6eadc42.0",
+		"@wordpress/components": "^28.8.1-next.1f6eadc42.0",
+		"@wordpress/compose": "^7.8.1-next.1f6eadc42.0",
+		"@wordpress/core-data": "^7.7.1-next.1f6eadc42.0",
+		"@wordpress/data": "^10.7.1-next.1f6eadc42.0",
+		"@wordpress/date": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/deprecated": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/dom": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/element": "^6.7.1-next.1f6eadc42.0",
+		"@wordpress/escape-html": "^3.7.1-next.1f6eadc42.0",
+		"@wordpress/hooks": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/html-entities": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/i18n": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/icons": "^10.7.1-next.1f6eadc42.0",
+		"@wordpress/interactivity": "^6.7.2-next.1f6eadc42.0",
+		"@wordpress/interactivity-router": "^2.7.1-next.1f6eadc42.0",
+		"@wordpress/keyboard-shortcuts": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/keycodes": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/notices": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/patterns": "^2.7.1-next.1f6eadc42.0",
+		"@wordpress/primitives": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/private-apis": "^1.7.1-next.1f6eadc42.0",
+		"@wordpress/reusable-blocks": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/rich-text": "^7.7.1-next.1f6eadc42.0",
+		"@wordpress/server-side-render": "^5.7.1-next.1f6eadc42.0",
+		"@wordpress/url": "^4.7.1-next.1f6eadc42.0",
+		"@wordpress/viewport": "^6.7.1-next.1f6eadc42.0",
+		"@wordpress/wordcount": "^4.7.1-next.1f6eadc42.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -82,5 +89,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c90d920de07c53dff82c5914635b56fafa503b7f"
+	"gitHead": "960a22b909c9fdbc90e7435b7ba8947b9218837a"
 }

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

@@ -194,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'
 				),

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;

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

@@ -29,8 +29,7 @@ export default function CommentsLegacy( {
 
 	const actions = [
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			__next40pxDefaultSize
 			key="convert"
 			onClick={ () => void setAttributes( { legacy: false } ) }
 			variant="primary"

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/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,
 		} );
 	};
 

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

@@ -66,16 +66,14 @@ const EmbedPlaceholder = ( {
 						justify="flex-start"
 					>
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="secondary"
 							onClick={ tryAgain }
 						>
 							{ _x( 'Try again', 'button label' ) }
 						</Button>{ ' ' }
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							variant="secondary"
 							onClick={ fallback }
 						>

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/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;

package/src/form-input/deprecated.js

@@ -9,6 +9,7 @@ import removeAccents from 'remove-accents';
  */
 import {
 	RichText,
+	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
@@ -26,6 +27,118 @@ const getNameFromLabelV1 = ( content ) => {
 	);
 };
 
+const v2 = {
+	attributes: {
+		type: {
+			type: 'string',
+			default: 'text',
+		},
+		name: {
+			type: 'string',
+		},
+		label: {
+			type: 'string',
+			default: 'Label',
+			selector: '.wp-block-form-input__label-content',
+			source: 'html',
+			__experimentalRole: 'content',
+		},
+		inlineLabel: {
+			type: 'boolean',
+			default: false,
+		},
+		required: {
+			type: 'boolean',
+			default: false,
+			selector: '.wp-block-form-input__input',
+			source: 'attribute',
+			attribute: 'required',
+		},
+		placeholder: {
+			type: 'string',
+			selector: '.wp-block-form-input__input',
+			source: 'attribute',
+			attribute: 'placeholder',
+			__experimentalRole: 'content',
+		},
+		value: {
+			type: 'string',
+			default: '',
+			selector: 'input',
+			source: 'attribute',
+			attribute: 'value',
+		},
+		visibilityPermissions: {
+			type: 'string',
+			default: 'all',
+		},
+	},
+	supports: {
+		anchor: true,
+		reusable: false,
+		spacing: {
+			margin: [ 'top', 'bottom' ],
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+	},
+	save( { attributes } ) {
+		const { type, name, label, inlineLabel, required, placeholder, value } =
+			attributes;
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+
+		const inputStyle = {
+			...borderProps.style,
+			...colorProps.style,
+		};
+
+		const inputClasses = clsx(
+			'wp-block-form-input__input',
+			colorProps.className,
+			borderProps.className
+		);
+		const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+		const blockProps = useBlockProps.save();
+
+		if ( 'hidden' === type ) {
+			return <input type={ type } name={ name } value={ value } />;
+		}
+
+		return (
+			<div { ...blockProps }>
+				{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
+				<label
+					className={ clsx( 'wp-block-form-input__label', {
+						'is-label-inline': inlineLabel,
+					} ) }
+				>
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+					<TagName
+						className={ inputClasses }
+						type={ 'textarea' === type ? undefined : type }
+						name={ name || getNameFromLabelV1( label ) }
+						required={ required }
+						aria-required={ required }
+						placeholder={ placeholder || undefined }
+						style={ inputStyle }
+					/>
+				</label>
+				{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
+			</div>
+		);
+	},
+};
+
 // Version without wrapper div in saved markup
 // See: https://github.com/WordPress/gutenberg/pull/56507
 const v1 = {
@@ -137,6 +250,6 @@ const v1 = {
 	},
 };
 
-const deprecated = [ v1 ];
+const deprecated = [ v2, v1 ];
 
 export default deprecated;

package/src/form-input/edit.js

@@ -31,6 +31,9 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		ref.current.focus();
 	}
 
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
 	const controls = (
 		<>
 			{ 'hidden' !== type && (
@@ -81,6 +84,18 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 		</>
 	);
 
+	const content = (
+		<RichText
+			tagName="span"
+			className="wp-block-form-input__label-content"
+			value={ label }
+			onChange={ ( newLabel ) => setAttributes( { label: newLabel } ) }
+			aria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }
+			data-empty={ ! label }
+			placeholder={ __( 'Type the label for this input' ) }
+		/>
+	);
+
 	if ( 'hidden' === type ) {
 		return (
 			<>
@@ -111,17 +126,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					'is-label-inline': inlineLabel || 'checkbox' === type,
 				} ) }
 			>
-				<RichText
-					tagName="span"
-					className="wp-block-form-input__label-content"
-					value={ label }
-					onChange={ ( newLabel ) =>
-						setAttributes( { label: newLabel } )
-					}
-					aria-label={ label ? __( 'Label' ) : __( 'Empty label' ) }
-					data-empty={ label ? false : true }
-					placeholder={ __( 'Type the label for this input' ) }
-				/>
+				{ ! isCheckboxOrRadio && content }
 				<TagName
 					type={ 'textarea' === type ? undefined : type }
 					className={ clsx(
@@ -147,6 +152,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 						...colorProps.style,
 					} }
 				/>
+				{ isCheckboxOrRadio && content }
 			</span>
 		</div>
 	);

package/src/form-input/save.js

@@ -55,6 +55,9 @@ export default function save( { attributes } ) {
 
 	const blockProps = useBlockProps.save();
 
+	// Note: radio inputs aren't implemented yet.
+	const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+
 	if ( 'hidden' === type ) {
 		return <input type={ type } name={ name } value={ value } />;
 	}
@@ -67,9 +70,11 @@ export default function save( { attributes } ) {
 					'is-label-inline': inlineLabel,
 				} ) }
 			>
-				<span className="wp-block-form-input__label-content">
-					<RichText.Content value={ label } />
-				</span>
+				{ ! isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
 				<TagName
 					className={ inputClasses }
 					type={ 'textarea' === type ? undefined : type }
@@ -79,6 +84,11 @@ export default function save( { attributes } ) {
 					placeholder={ placeholder || undefined }
 					style={ inputStyle }
 				/>
+				{ isCheckboxOrRadio && (
+					<span className="wp-block-form-input__label-content">
+						<RichText.Content value={ label } />
+					</span>
+				) }
 			</label>
 			{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
 		</div>

package/src/form-input/style.scss

@@ -15,16 +15,17 @@
 		}
 	}
 
-	/*
-	Small tweak to left-align the checkbox.
-	Even though `:has` is not currently supported in Firefox, this is a small tweak
-	and does not affect the functionality of the block or the user's experience.
-	There will be a minor inconsistency between browsers. However, it's more important to provide
-	a better experience for 80+% of users, until Firefox catches up and supports `:has`.
-	*/
 	&:has(input[type="checkbox"]) {
+		flex-direction: row;
 		width: fit-content;
-		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
+
+		.wp-block-form-input__label-content {
+			margin: 0;
+		}
+	}
+
+	&:has(.wp-block-form-input__label-content + input[type="checkbox"]) {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This style is required for old markup. */
 		flex-direction: row-reverse;
 	}
 }

package/src/freeform/modal.js

@@ -25,8 +25,7 @@ function ModalAuxiliaryActions( { onClick, isModalFullScreen } ) {
 
 	return (
 		<Button
-			// TODO: Switch to `true` (40px size) if possible
-			__next40pxDefaultSize={ false }
+			size="small"
 			onClick={ onClick }
 			icon={ fullscreen }
 			isPressed={ isModalFullScreen }
@@ -123,8 +122,7 @@ export default function ModalEdit( props ) {
 					>
 						<FlexItem>
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								variant="tertiary"
 								onClick={ onClose }
 							>
@@ -133,8 +131,7 @@ export default function ModalEdit( props ) {
 						</FlexItem>
 						<FlexItem>
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								variant="primary"
 								onClick={ () => {
 									setAttributes( {