@wordpress/block-library 8.21.0 → 8.22.0

package/src/block/edit.js

@@ -35,6 +35,7 @@ import { useRef, useMemo } from '@wordpress/element';
  */
 import { unlock } from '../lock-unlock';
 
+const { useLayoutClasses } = unlock( blockEditorPrivateApis );
 const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
 
 const useInferredLayout = ( blocks, parentLayout ) => {
@@ -71,7 +72,6 @@ export default function ReusableBlockEdit( {
 	attributes: { ref },
 	__unstableParentLayout: parentLayout,
 } ) {
-	const { useLayoutClasses } = unlock( blockEditorPrivateApis );
 	const hasAlreadyRendered = useHasRecursion( ref );
 	const { record, hasResolved } = useEntityRecord(
 		'postType',

package/src/calendar/index.php

@@ -33,10 +33,8 @@ function render_block_core_calendar( $attributes ) {
 			str_contains( $permalink_structure, '%monthnum%' ) &&
 			str_contains( $permalink_structure, '%year%' )
 		) {
-			// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
 			$monthnum = $attributes['month'];
-			// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
-			$year = $attributes['year'];
+			$year     = $attributes['year'];
 		}
 	}
 
@@ -70,10 +68,8 @@ function render_block_core_calendar( $attributes ) {
 		$calendar
 	);
 
-	// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
 	$monthnum = $previous_monthnum;
-	// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited
-	$year = $previous_year;
+	$year     = $previous_year;
 
 	return $output;
 }

package/src/column/edit.js

@@ -12,7 +12,7 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 	useBlockProps,
-	useSetting,
+	useSettings,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -33,14 +33,9 @@ function ColumnEdit( {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 	} );
 
 	const { columnsIds, hasChildBlocks, rootClientId } = useSelect(

package/src/column/edit.native.js

@@ -15,7 +15,7 @@ import {
 	BlockVerticalAlignmentToolbar,
 	InspectorControls,
 	store as blockEditorStore,
-	useSetting,
+	useSettings,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -60,14 +60,9 @@ function ColumnEdit( {
 
 	const [ widthUnit, setWidthUnit ] = useState( valueUnit || '%' );
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 	} );
 
 	const updateAlignment = ( alignment ) => {

package/src/columns/edit.native.js

@@ -23,7 +23,7 @@ import {
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	BlockVariationPicker,
-	useSetting,
+	useSettings,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { withDispatch, useSelect } from '@wordpress/data';
@@ -106,14 +106,9 @@ function ColumnsEditContainer( {
 	const { verticalAlignment, align } = attributes;
 	const { width } = sizes || {};
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vw',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem', 'vw' ],
 	} );
 
 	useEffect( () => {

package/src/comment-author-avatar/index.php

@@ -23,7 +23,7 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 		return '';
 	}
 
-	// This is the only way to retreive style and classes on different instances.
+	// This is the only way to retrieve style and classes on different instances.
 	$wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports();
 
 	/**

package/src/cover/controls.native.js

@@ -22,7 +22,7 @@ import {
 import { plus } from '@wordpress/icons';
 import { useState, useCallback, useRef } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useSetting, MediaUpload } from '@wordpress/block-editor';
+import { useSettings, MediaUpload } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -68,14 +68,9 @@ function Controls( {
 		[ minHeight ]
 	);
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: { px: 430, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 

package/src/cover/edit/index.js

@@ -14,7 +14,7 @@ import {
 	withColors,
 	ColorPalette,
 	useBlockProps,
-	useSetting,
+	useSettings,
 	useInnerBlocksProps,
 	__experimentalUseGradient,
 	store as blockEditorStore,
@@ -318,7 +318,8 @@ function CoverEdit( {
 	const blockProps = useBlockProps( { ref } );
 
 	// Check for fontSize support before we pass a fontSize attribute to the innerBlocks.
-	const hasFontSizes = !! useSetting( 'typography.fontSizes' )?.length;
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
+	const hasFontSizes = fontSizes?.length > 0;
 	const innerBlocksTemplate = getInnerBlocksTemplate( {
 		fontSize: hasFontSizes ? 'large' : undefined,
 	} );

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

@@ -20,7 +20,7 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import {
 	InspectorControls,
-	useSetting,
+	useSettings,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
@@ -42,14 +42,9 @@ function CoverHeightInput( {
 	const inputId = `block-cover-height-input-${ instanceId }`;
 	const isPx = unit === 'px';
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: { px: 430, '%': 20, em: 20, rem: 20, vw: 20, vh: 50 },
 	} );
 

package/src/file/index.php

@@ -59,7 +59,8 @@ function render_block_core_file( $attributes, $content, $block ) {
 		$processor->next_tag();
 		$processor->set_attribute( 'data-wp-interactive', '' );
 		$processor->next_tag( 'object' );
-		$processor->set_attribute( 'data-wp-style--display', 'selectors.core.file.hasPdfPreview' );
+		$processor->set_attribute( 'data-wp-bind--hidden', '!selectors.core.file.hasPdfPreview' );
+		$processor->set_attribute( 'hidden', true );
 		return $processor->get_updated_html();
 	}
 

package/src/file/style.scss

@@ -29,12 +29,6 @@
 	margin-bottom: 1em;
 }
 
-@media (max-width: 768px) {
-	.wp-block-file__embed {
-		display: none;
-	}
-}
-
 //This needs a low specificity so it won't override the rules from the button element if defined in theme.json.
 :where(.wp-block-file__button) {
 	border-radius: 2em;

package/src/file/view.js

@@ -5,13 +5,13 @@ import { store } from '@wordpress/interactivity';
 /**
  * Internal dependencies
  */
-import { browserSupportsPdfs } from './utils';
+import { browserSupportsPdfs as hasPdfPreview } from './utils';
 
 store( {
 	selectors: {
 		core: {
 			file: {
-				hasPdfPreview: browserSupportsPdfs() ? 'inherit' : 'none',
+				hasPdfPreview,
 			},
 		},
 	},

package/src/form/edit.js

@@ -26,6 +26,8 @@ const ALLOWED_BLOCKS = [
 	'core/form-input',
 	'core/form-submit-button',
 	'core/form-submission-notification',
+	'core/group',
+	'core/columns',
 ];
 
 const TEMPLATE = [
@@ -107,7 +109,7 @@ const Edit = ( { attributes, setAttributes, clientId } ) => {
 						help={
 							submissionMethod === 'custom'
 								? __(
-										'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Andvanced" section.'
+										'Select the method to use for form submissions. Additional options for the "custom" mode can be found in the "Advanced" section.'
 								  )
 								: __(
 										'Select the method to use for form submissions.'

package/src/form/index.js

@@ -7,6 +7,11 @@ import metadata from './block.json';
 import save from './save';
 import variations from './variations';
 
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
 const { name } = metadata;
 
 export { metadata, name };
@@ -17,4 +22,36 @@ export const settings = {
 	variations,
 };
 
-export const init = () => initBlock( { name, metadata, settings } );
+export const init = () => {
+	// Prevent adding forms inside forms.
+	const DISALLOWED_PARENTS = [ 'core/form' ];
+	addFilter(
+		'blockEditor.__unstableCanInsertBlockType',
+		'removeTemplatePartsFromPostTemplates',
+		(
+			canInsert,
+			blockType,
+			rootClientId,
+			{ getBlock, getBlockParentsByBlockName }
+		) => {
+			if ( blockType.name !== 'core/form' ) {
+				return canInsert;
+			}
+
+			for ( const disallowedParentType of DISALLOWED_PARENTS ) {
+				const hasDisallowedParent =
+					getBlock( rootClientId )?.name === disallowedParentType ||
+					getBlockParentsByBlockName(
+						rootClientId,
+						disallowedParentType
+					).length;
+				if ( hasDisallowedParent ) {
+					return false;
+				}
+			}
+			return true;
+		}
+	);
+
+	return initBlock( { name, metadata, settings } );
+};

package/src/form/variations.js

@@ -63,7 +63,7 @@ const variations = [
 		name: 'wp-privacy-form',
 		title: __( 'Experimental privacy request form' ),
 		keywords: [ 'GDPR' ],
-		description: __( 'A form torequest data exports and/or deletion.' ),
+		description: __( 'A form to request data exports and/or deletion.' ),
 		attributes: {
 			submissionMethod: 'custom',
 			action: '',

package/src/form-input/block.json

@@ -3,9 +3,9 @@
 	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/form-input",
-	"title": "Input field",
+	"title": "Input Field",
 	"category": "common",
-	"parent": [ "core/form" ],
+	"ancestor": [ "core/form" ],
 	"description": "The basic building block for forms.",
 	"keywords": [ "input", "form" ],
 	"textdomain": "default",

package/src/form-input/variations.js

@@ -6,7 +6,7 @@ import { __ } from '@wordpress/i18n';
 const variations = [
 	{
 		name: 'text',
-		title: __( 'Text input' ),
+		title: __( 'Text Input' ),
 		icon: 'edit-page',
 		description: __( 'A generic text input.' ),
 		attributes: { type: 'text' },
@@ -17,7 +17,7 @@ const variations = [
 	},
 	{
 		name: 'textarea',
-		title: __( 'Textarea input' ),
+		title: __( 'Textarea Input' ),
 		icon: 'testimonial',
 		description: __(
 			'A textarea input to allow entering multiple lines of text.'
@@ -29,7 +29,7 @@ const variations = [
 	},
 	{
 		name: 'checkbox',
-		title: __( 'Checkbox input' ),
+		title: __( 'Checkbox Input' ),
 		description: __( 'A simple checkbox input.' ),
 		icon: 'forms',
 		attributes: { type: 'checkbox', inlineLabel: true },
@@ -39,7 +39,7 @@ const variations = [
 	},
 	{
 		name: 'email',
-		title: __( 'Email input' ),
+		title: __( 'Email Input' ),
 		icon: 'email',
 		description: __( 'Used for email addresses.' ),
 		attributes: { type: 'email' },
@@ -49,7 +49,7 @@ const variations = [
 	},
 	{
 		name: 'url',
-		title: __( 'URL input' ),
+		title: __( 'URL Input' ),
 		icon: 'admin-site',
 		description: __( 'Used for URLs.' ),
 		attributes: { type: 'url' },
@@ -59,7 +59,7 @@ const variations = [
 	},
 	{
 		name: 'tel',
-		title: __( 'Telephone input' ),
+		title: __( 'Telephone Input' ),
 		icon: 'phone',
 		description: __( 'Used for phone numbers.' ),
 		attributes: { type: 'tel' },
@@ -69,7 +69,7 @@ const variations = [
 	},
 	{
 		name: 'number',
-		title: __( 'Number input' ),
+		title: __( 'Number Input' ),
 		icon: 'edit-page',
 		description: __( 'A numeric input.' ),
 		attributes: { type: 'number' },

package/src/form-submission-notification/block.json

@@ -5,7 +5,7 @@
 	"name": "core/form-submission-notification",
 	"title": "Form Submission Notification",
 	"category": "common",
-	"parent": [ "core/form" ],
+	"ancestor": [ "core/form" ],
 	"description": "Provide a notification message after the form has been submitted.",
 	"keywords": [ "form", "feedback", "notification", "message" ],
 	"textdomain": "default",

package/src/form-submission-notification/variations.js

@@ -6,8 +6,8 @@ import { __ } from '@wordpress/i18n';
 const variations = [
 	{
 		name: 'form-submission-success',
-		title: __( 'Form submission success' ),
-		description: __( 'Success message for form submissions' ),
+		title: __( 'Form Submission Success' ),
+		description: __( 'Success message for form submissions.' ),
 		attributes: {
 			type: 'success',
 		},
@@ -31,8 +31,8 @@ const variations = [
 	},
 	{
 		name: 'form-submission-error',
-		title: __( 'Form submission error' ),
-		description: __( 'Error/failure message for form submissions' ),
+		title: __( 'Form Submission Error' ),
+		description: __( 'Error/failure message for form submissions.' ),
 		attributes: {
 			type: 'error',
 		},

package/src/form-submit-button/block.json

@@ -3,10 +3,10 @@
 	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/form-submit-button",
-	"title": "Form submit button",
+	"title": "Form Submit Button",
 	"category": "common",
 	"icon": "button",
-	"parent": [ "core/form" ],
+	"ancestor": [ "core/form" ],
 	"description": "A submission button for forms.",
 	"keywords": [ "submit", "button", "form" ],
 	"textdomain": "default",

package/src/freeform/test/__snapshots__/index.native.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Classic block converts content into blocks 1`] = `
+"<!-- wp:paragraph -->
+<p>I'm classic!</p>
+<!-- /wp:paragraph -->"
+`;

package/src/freeform/test/index.native.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import {
+	fireEvent,
+	getBlock,
+	getEditorHtml,
+	initializeEditor,
+	screen,
+	setupCoreBlocks,
+	within,
+} from 'test/helpers';
+
+const CLASSIC_BLOCK_HTML = `<p>I'm classic!</p>`;
+const DEFAULT_EDITOR_CAPABILITIES = {
+	unsupportedBlockEditor: true,
+	canEnableUnsupportedBlockEditor: true,
+};
+
+setupCoreBlocks();
+
+describe( 'Classic block', () => {
+	it( 'displays option to edit using web editor', async () => {
+		await initializeEditor( {
+			initialHtml: CLASSIC_BLOCK_HTML,
+			capabilities: DEFAULT_EDITOR_CAPABILITIES,
+		} );
+
+		const block = getBlock( screen, 'Classic' );
+		fireEvent.press( block );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( block ).getByText( 'Unsupported' ) );
+
+		const actionButton = screen.getByText( 'Edit using web editor' );
+		expect( actionButton ).toBeVisible();
+	} );
+
+	it( 'converts content into blocks', async () => {
+		await initializeEditor( {
+			initialHtml: CLASSIC_BLOCK_HTML,
+			capabilities: DEFAULT_EDITOR_CAPABILITIES,
+		} );
+
+		const block = getBlock( screen, 'Classic' );
+		fireEvent.press( block );
+
+		// Tap the block to open the unsupported block details
+		fireEvent.press( within( block ).getByText( 'Unsupported' ) );
+
+		const actionButton = screen.getByText( 'Convert to blocks' );
+		expect( actionButton ).toBeVisible();
+
+		fireEvent.press( actionButton );
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );

package/src/group/edit.js

@@ -7,7 +7,6 @@ import {
 	useBlockProps,
 	InspectorControls,
 	useInnerBlocksProps,
-	useSetting,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
@@ -98,11 +97,7 @@ function GroupEdit( {
 	} = attributes;
 
 	// Layout settings.
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = ! layout?.type
-		? { ...defaultLayout, ...layout, type: 'default' }
-		: { ...defaultLayout, ...layout };
-	const { type = 'default' } = usedLayout;
+	const { type = 'default' } = layout;
 	const layoutSupportEnabled =
 		themeSupportsLayout || type === 'flex' || type === 'grid';
 
@@ -112,7 +107,7 @@ function GroupEdit( {
 	} );
 	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
 		attributes,
-		usedLayoutType: usedLayout?.type,
+		usedLayoutType: type,
 		hasInnerBlocks,
 	} );
 

package/src/html/preview.js

@@ -22,12 +22,17 @@ const DEFAULT_STYLES = `
 `;
 
 export default function HTMLEditPreview( { content, isSelected } ) {
-	const settingStyles = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings()?.styles;
-	}, [] );
+	const settingStyles = useSelect(
+		( select ) => select( blockEditorStore ).getSettings().styles
+	);
 
 	const styles = useMemo(
-		() => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ],
+		() => [
+			DEFAULT_STYLES,
+			...transformStyles(
+				settingStyles.filter( ( style ) => style.css )
+			),
+		],
 		[ settingStyles ]
 	);
 

package/src/image/image.js

@@ -24,7 +24,7 @@ import {
 	__experimentalImageURLInputUI as ImageURLInputUI,
 	MediaReplaceFlow,
 	store as blockEditorStore,
-	useSetting,
+	useSettings,
 	BlockAlignmentControl,
 	__experimentalImageEditor as ImageEditor,
 	__experimentalGetElementClassName,
@@ -83,6 +83,11 @@ const scaleOptions = [
 	},
 ];
 
+const disabledClickProps = {
+	onClick: ( event ) => event.preventDefault(),
+	'aria-disabled': true,
+};
+
 export default function Image( {
 	temporaryURL,
 	attributes,
@@ -369,7 +374,7 @@ export default function Image( {
 		availableUnits: [ 'px' ],
 	} );
 
-	const lightboxSetting = useSetting( 'lightbox' );
+	const [ lightboxSetting ] = useSettings( 'lightbox' );
 
 	const showLightboxToggle =
 		!! lightbox || lightboxSetting?.allowEditing === true;
@@ -543,14 +548,14 @@ export default function Image( {
 					{ showLightboxToggle && (
 						<ToolsPanelItem
 							hasValue={ () => !! lightbox }
-							label={ __( 'Expand on Click' ) }
+							label={ __( 'Expand on click' ) }
 							onDeselect={ () => {
 								setAttributes( { lightbox: undefined } );
 							} }
 							isShownByDefault={ true }
 						>
 							<ToggleControl
-								label={ __( 'Expand on Click' ) }
+								label={ __( 'Expand on click' ) }
 								checked={ lightboxChecked }
 								onChange={ ( newValue ) => {
 									setAttributes( {
@@ -725,7 +730,6 @@ export default function Image( {
 			}
 		}
 		/* eslint-enable no-lonely-if */
-
 		img = (
 			<ResizableBox
 				style={ {
@@ -784,7 +788,14 @@ export default function Image( {
 			{ /* Hide controls during upload to avoid component remount,
 				which causes duplicated image upload. */ }
 			{ ! temporaryURL && controls }
-			{ img }
+			{ /* If the image has a href, wrap in an <a /> tag to trigger any inherited link element styles */ }
+			{ !! href ? (
+				<a href={ href } { ...disabledClickProps }>
+					{ img }
+				</a>
+			) : (
+				img
+			) }
 			{ showCaption &&
 				( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText