@wordpress/block-library 8.24.0 → 8.25.0

package/src/code/edit.native.js

@@ -6,7 +6,7 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { PlainText } from '@wordpress/block-editor';
+import { RichText } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
@@ -20,14 +20,11 @@ import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
  */
 import styles from './theme.scss';
 
-// Note: styling is applied directly to the (nested) PlainText component. Web-side components
-// apply it to the container 'div' but we don't have a proper proposal for cascading styling yet.
 export function CodeEdit( props ) {
 	const {
 		attributes,
 		setAttributes,
-		onFocus,
-		onBlur,
+		onRemove,
 		style,
 		insertBlocksAfter,
 		mergeBlocks,
@@ -37,30 +34,31 @@ export function CodeEdit( props ) {
 			styles.blockCode,
 			styles.blockCodeDark
 		),
-		...( style?.fontSize && { fontSize: style.fontSize } ),
 	};
 
+	const textStyle = style?.fontSize ? { fontSize: style.fontSize } : {};
+
 	const placeholderStyle = usePreferredColorSchemeStyle(
 		styles.placeholder,
 		styles.placeholderDark
 	);
 
 	return (
-		<View>
-			<PlainText
+		<View style={ codeStyle }>
+			<RichText
+				tagName="pre"
 				value={ attributes.content }
 				identifier="content"
-				style={ codeStyle }
-				multiline={ true }
+				style={ textStyle }
 				underlineColorAndroid="transparent"
 				onChange={ ( content ) => setAttributes( { content } ) }
 				onMerge={ mergeBlocks }
+				onRemove={ onRemove }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
-				isSelected={ props.isSelected }
-				onFocus={ onFocus }
-				onBlur={ onBlur }
 				placeholderTextColor={ placeholderStyle.color }
+				preserveWhiteSpace
+				__unstablePastePlainText
 				__unstableOnSplitAtDoubleLineEnd={ () =>
 					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
 				}

package/src/code/save.js

@@ -13,7 +13,10 @@ export default function save( { attributes } ) {
 		<pre { ...useBlockProps.save() }>
 			<RichText.Content
 				tagName="code"
-				value={ escape( attributes.content ) }
+				// To do: `escape` encodes characters in shortcodes and URLs to
+				// prevent embedding in PHP. Ideally checks for the code block,
+				// or pre/code tags, should be made on the PHP side?
+				value={ escape( attributes.content.toString() ) }
 			/>
 		</pre>
 	);

package/src/code/test/edit.native.js

@@ -49,7 +49,7 @@ describe( 'Code', () => {
 		const screen = await initializeEditor( {
 			initialHtml,
 		} );
-		const { getByDisplayValue } = screen;
+		const { findByPlaceholderText } = screen;
 
 		// Get block
 		const codeBlock = await getBlock( screen, 'Code' );
@@ -57,7 +57,7 @@ describe( 'Code', () => {
 		fireEvent.press( codeBlock );
 
 		// Get initial text
-		const codeBlockText = getByDisplayValue( 'Sample text' );
+		const codeBlockText = await findByPlaceholderText( 'Write code…' );
 		expect( codeBlockText ).toBeVisible();
 
 		expect( getEditorHtml() ).toMatchSnapshot();

package/src/cover/test/edit.native.js

@@ -80,7 +80,13 @@ const MEDIA_OPTIONS = [
 // Simplified tree to render Cover edit within slot.
 const CoverEdit = ( props ) => (
 	<SlotFillProvider>
-		<BlockEdit isSelected name={ cover.name } clientId={ 0 } { ...props } />
+		<BlockEdit
+			isSelected
+			mayDisplayControls
+			name={ cover.name }
+			clientId={ 0 }
+			{ ...props }
+		/>
 		<BottomSheetSettings isVisible />
 	</SlotFillProvider>
 );

package/src/details/block.json

@@ -13,8 +13,8 @@
 			"default": false
 		},
 		"summary": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "summary"
 		}
 	},

package/src/embed/block.json

@@ -12,8 +12,8 @@
 			"__experimentalRole": "content"
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "figcaption",
 			"__experimentalRole": "content"
 		},

package/src/embed/embed-preview.native.js

@@ -10,6 +10,7 @@ import classnames from 'classnames/dedupe';
 import { View } from '@wordpress/primitives';
 import {
 	BlockCaption,
+	RichText,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
@@ -51,7 +52,7 @@ const EmbedPreview = ( {
 		styles[ `embed-preview__sandbox--align-${ align }` ];
 
 	function accessibilityLabelCreator( caption ) {
-		return ! caption
+		return RichText.isEmpty( caption )
 			? /* translators: accessibility text. Empty Embed caption. */
 			  __( 'Embed caption. Empty' )
 			: sprintf(

package/src/embed/icons.js

@@ -137,7 +137,7 @@ export const embedAnimotoIcon = (
 export const embedDailymotionIcon = (
 	<SVG viewBox="0 0 24 24">
 		<Path
-			d="m12.1479 18.5957c-2.4949 0-4.28131-1.7558-4.28131-4.0658 0-2.2176 1.78641-4.0965 4.09651-4.0965 2.2793 0 4.0349 1.7864 4.0349 4.1581 0 2.2794-1.7556 4.0042-3.8501 4.0042zm8.3521-18.5957-4.5329 1v7c-1.1088-1.41691-2.8028-1.8787-4.8049-1.8787-2.09443 0-3.97329.76993-5.5133 2.27917-1.72483 1.66323-2.6489 3.78863-2.6489 6.16033 0 2.5873.98562 4.8049 2.89526 6.499 1.44763 1.2936 3.17251 1.9402 5.17454 1.9402 1.9713 0 3.4498-.5236 4.8973-1.9402v1.9402h4.5329c0-7.6359 0-15.3641 0-23z"
+			d="M11.903 16.568c-1.82 0-3.124-1.281-3.124-2.967a2.987 2.987 0 0 1 2.989-2.989c1.663 0 2.944 1.304 2.944 3.034 0 1.663-1.281 2.922-2.81 2.922ZM17.997 3l-3.308.73v5.107c-.809-1.034-2.045-1.37-3.505-1.37-1.529 0-2.9.561-4.023 1.662-1.259 1.214-1.933 2.764-1.933 4.495 0 1.888.72 3.506 2.113 4.742 1.056.944 2.314 1.415 3.775 1.415 1.438 0 2.517-.382 3.573-1.415v1.415h3.308V3Z"
 			fill="#333436"
 		/>
 	</SVG>

package/src/file/block.json

@@ -21,8 +21,8 @@
 			"attribute": "id"
 		},
 		"fileName": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "a:not([download])"
 		},
 		"textLinkHref": {
@@ -42,8 +42,8 @@
 			"default": true
 		},
 		"downloadButtonText": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "a[download]"
 		},
 		"displayPreview": {

package/src/file/edit.js

@@ -102,7 +102,7 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			revokeBlobURL( href );
 		}
 
-		if ( downloadButtonText === undefined ) {
+		if ( RichText.isEmpty( downloadButtonText ) ) {
 			setAttributes( {
 				downloadButtonText: _x( 'Download', 'button label' ),
 			} );

package/src/file/edit.native.js

@@ -97,7 +97,7 @@ export class FileEdit extends Component {
 		const { attributes, setAttributes } = this.props;
 		const { downloadButtonText } = attributes;
 
-		if ( downloadButtonText === undefined || downloadButtonText === '' ) {
+		if ( RichText.isEmpty( downloadButtonText ) ) {
 			setAttributes( {
 				downloadButtonText: _x( 'Download', 'button label' ),
 			} );

package/src/file/save.js

@@ -25,7 +25,11 @@ export default function save( { attributes } ) {
 		previewHeight,
 	} = attributes;
 
-	const pdfEmbedLabel = RichText.isEmpty( fileName ) ? 'PDF embed' : fileName;
+	const pdfEmbedLabel = RichText.isEmpty( fileName )
+		? 'PDF embed'
+		: // To do: use toPlainText, but we need ensure it's RichTextData. See
+		  // https://github.com/WordPress/gutenberg/pull/56710.
+		  fileName.toString();
 
 	const hasFilename = ! RichText.isEmpty( fileName );
 

package/src/form-input/block.json

@@ -19,10 +19,10 @@
 			"type": "string"
 		},
 		"label": {
-			"type": "string",
+			"type": "rich-text",
 			"default": "Label",
 			"selector": ".wp-block-form-input__label-content",
-			"source": "html",
+			"source": "rich-text",
 			"__experimentalRole": "content"
 		},
 		"inlineLabel": {

package/src/form-input/deprecated.js

@@ -0,0 +1,142 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+import removeAccents from 'remove-accents';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RichText,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+
+const getNameFromLabelV1 = ( content ) => {
+	return (
+		removeAccents( stripHTML( content ) )
+			// Convert anything that's not a letter or number to a hyphen.
+			.replace( /[^\p{L}\p{N}]+/gu, '-' )
+			// Convert to lowercase
+			.toLowerCase()
+			// Remove any remaining leading or trailing hyphens.
+			.replace( /(^-+)|(-+$)/g, '' )
+	);
+};
+
+// Version without wrapper div in saved markup
+// See: https://github.com/WordPress/gutenberg/pull/56507
+const v1 = {
+	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: {
+		className: false,
+		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 = classNames(
+			'wp-block-form-input__input',
+			colorProps.className,
+			borderProps.className
+		);
+		const TagName = type === 'textarea' ? 'textarea' : 'input';
+
+		if ( 'hidden' === type ) {
+			return <input type={ type } name={ name } value={ value } />;
+		}
+
+		/* eslint-disable jsx-a11y/label-has-associated-control */
+		return (
+			<label
+				className={ classNames( '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 */
+	},
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;

package/src/form-input/edit.js

@@ -59,7 +59,7 @@ function InputFieldBlock( { attributes, setAttributes, className } ) {
 					</PanelBody>
 				</InspectorControls>
 			) }
-			<InspectorControls __experimentalGroup="advanced">
+			<InspectorControls group="advanced">
 				<TextControl
 					autoComplete="off"
 					label={ __( 'Name' ) }

package/src/form-input/index.js

@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import initBlock from '../utils/init-block';
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -12,6 +13,7 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
+	deprecated,
 	edit,
 	save,
 	variations,

package/src/form-input/save.js

@@ -9,9 +9,11 @@ import removeAccents from 'remove-accents';
  */
 import {
 	RichText,
+	useBlockProps,
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Get the name attribute from a content string.
@@ -21,11 +23,8 @@ import {
  * @return {string} Returns the slug.
  */
 const getNameFromLabel = ( content ) => {
-	const dummyElement = document.createElement( 'div' );
-	dummyElement.innerHTML = content;
-	// Get the slug.
 	return (
-		removeAccents( dummyElement.innerText )
+		removeAccents( stripHTML( content ) )
 			// Convert anything that's not a letter or number to a hyphen.
 			.replace( /[^\p{L}\p{N}]+/gu, '-' )
 			// Convert to lowercase
@@ -54,30 +53,34 @@ export default function save( { attributes } ) {
 	);
 	const TagName = type === 'textarea' ? 'textarea' : 'input';
 
+	const blockProps = useBlockProps.save();
+
 	if ( 'hidden' === type ) {
 		return <input type={ type } name={ name } value={ value } />;
 	}
 
-	/* eslint-disable jsx-a11y/label-has-associated-control */
 	return (
-		<label
-			className={ classNames( '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 || getNameFromLabel( label ) }
-				required={ required }
-				aria-required={ required }
-				placeholder={ placeholder || undefined }
-				style={ inputStyle }
-			/>
-		</label>
+		<div { ...blockProps }>
+			{ /* eslint-disable jsx-a11y/label-has-associated-control */ }
+			<label
+				className={ classNames( '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 || getNameFromLabel( label ) }
+					required={ required }
+					aria-required={ required }
+					placeholder={ placeholder || undefined }
+					style={ inputStyle }
+				/>
+			</label>
+			{ /* eslint-enable jsx-a11y/label-has-associated-control */ }
+		</div>
 	);
-	/* eslint-enable jsx-a11y/label-has-associated-control */
 }

package/src/gallery/block.json

@@ -46,8 +46,8 @@
 					"attribute": "data-id"
 				},
 				"caption": {
-					"type": "string",
-					"source": "html",
+					"type": "rich-text",
+					"source": "rich-text",
 					"selector": ".blocks-gallery-item__caption"
 				}
 			}
@@ -72,8 +72,8 @@
 			"maximum": 8
 		},
 		"caption": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": ".blocks-gallery-caption"
 		},
 		"imageCrop": {

package/src/gallery/edit.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { compose, usePrevious } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import {
 	BaseControl,
 	PanelBody,
@@ -14,7 +14,6 @@ import {
 	ToggleControl,
 	RangeControl,
 	Spinner,
-	ToolbarButton,
 } from '@wordpress/components';
 import {
 	store as blockEditorStore,
@@ -25,13 +24,7 @@ import {
 	BlockControls,
 	MediaReplaceFlow,
 } from '@wordpress/block-editor';
-import {
-	Platform,
-	useCallback,
-	useEffect,
-	useState,
-	useMemo,
-} from '@wordpress/element';
+import { Platform, useEffect, useMemo } from '@wordpress/element';
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { withViewportMatch } from '@wordpress/viewport';
@@ -39,7 +32,6 @@ import { View } from '@wordpress/primitives';
 import { createBlock } from '@wordpress/blocks';
 import { createBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
-import { caption as captionIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -94,34 +86,7 @@ function GalleryEdit( props ) {
 		onFocus,
 	} = props;
 
-	const { columns, imageCrop, linkTarget, linkTo, sizeSlug, caption } =
-		attributes;
-	const [ showCaption, setShowCaption ] = useState( !! caption );
-	const prevCaption = usePrevious( caption );
-
-	// We need to show the caption when changes come from
-	// history navigation(undo/redo).
-	useEffect( () => {
-		if ( caption && ! prevCaption ) {
-			setShowCaption( true );
-		}
-	}, [ caption, prevCaption ] );
-
-	useEffect( () => {
-		if ( ! isSelected && ! caption ) {
-			setShowCaption( false );
-		}
-	}, [ isSelected, caption ] );
-
-	// Focus the caption when we click to add one.
-	const captionRef = useCallback(
-		( node ) => {
-			if ( node && ! caption ) {
-				node.focus();
-			}
-		},
-		[ caption ]
-	);
+	const { columns, imageCrop, linkTarget, linkTo, sizeSlug } = attributes;
 
 	const {
 		__unstableMarkNextChangeAsNotPersistent,
@@ -620,25 +585,6 @@ function GalleryEdit( props ) {
 			</InspectorControls>
 			{ Platform.isWeb && (
 				<>
-					<BlockControls group="block">
-						{ ! isContentLocked && (
-							<ToolbarButton
-								onClick={ () => {
-									setShowCaption( ! showCaption );
-									if ( showCaption && caption ) {
-										setAttributes( { caption: undefined } );
-									}
-								} }
-								icon={ captionIcon }
-								isPressed={ showCaption }
-								label={
-									showCaption
-										? __( 'Remove caption' )
-										: __( 'Add caption' )
-								}
-							/>
-						) }
-					</BlockControls>
 					<BlockControls group="other">
 						<MediaReplaceFlow
 							allowedTypes={ ALLOWED_MEDIA_TYPES }
@@ -661,8 +607,7 @@ function GalleryEdit( props ) {
 			) }
 			<Gallery
 				{ ...props }
-				showCaption={ showCaption }
-				ref={ Platform.isWeb ? captionRef : undefined }
+				isContentLocked={ isContentLocked }
 				images={ images }
 				mediaPlaceholder={
 					! hasImages || Platform.isNative