@wordpress/block-library 8.24.1 → 8.25.1-next.79a6196f.0

package/src/block/v1/edit.js

@@ -0,0 +1,163 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	useEntityBlockEditor,
+	useEntityProp,
+	useEntityRecord,
+} from '@wordpress/core-data';
+import {
+	Placeholder,
+	Spinner,
+	TextControl,
+	PanelBody,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import {
+	useInnerBlocksProps,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
+	InnerBlocks,
+	InspectorControls,
+	useBlockProps,
+	Warning,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useRef, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useLayoutClasses } = unlock( blockEditorPrivateApis );
+const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
+
+const useInferredLayout = ( blocks, parentLayout ) => {
+	const initialInferredAlignmentRef = useRef();
+
+	return useMemo( () => {
+		// Exit early if the pattern's blocks haven't loaded yet.
+		if ( ! blocks?.length ) {
+			return {};
+		}
+
+		let alignment = initialInferredAlignmentRef.current;
+
+		// Only track the initial alignment so that temporarily removed
+		// alignments can be reapplied.
+		if ( alignment === undefined ) {
+			const isConstrained = parentLayout?.type === 'constrained';
+			const hasFullAlignment = blocks.some( ( block ) =>
+				fullAlignments.includes( block.attributes.align )
+			);
+
+			alignment = isConstrained && hasFullAlignment ? 'full' : null;
+			initialInferredAlignmentRef.current = alignment;
+		}
+
+		const layout = alignment ? parentLayout : undefined;
+
+		return { alignment, layout };
+	}, [ blocks, parentLayout ] );
+};
+
+export default function ReusableBlockEdit( {
+	name,
+	attributes: { ref },
+	__unstableParentLayout: parentLayout,
+} ) {
+	const hasAlreadyRendered = useHasRecursion( ref );
+	const { record, hasResolved } = useEntityRecord(
+		'postType',
+		'wp_block',
+		ref
+	);
+	const isMissing = hasResolved && ! record;
+
+	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
+		'postType',
+		'wp_block',
+		{ id: ref }
+	);
+
+	const [ title, setTitle ] = useEntityProp(
+		'postType',
+		'wp_block',
+		'title',
+		ref
+	);
+
+	const { alignment, layout } = useInferredLayout( blocks, parentLayout );
+	const layoutClasses = useLayoutClasses( { layout }, name );
+
+	const blockProps = useBlockProps( {
+		className: classnames(
+			'block-library-block__reusable-block-container',
+			layout && layoutClasses,
+			{ [ `align${ alignment }` ]: alignment }
+		),
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		layout,
+		onInput,
+		onChange,
+		renderAppender: blocks?.length
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
+	let children = null;
+
+	if ( hasAlreadyRendered ) {
+		children = (
+			<Warning>
+				{ __( 'Block cannot be rendered inside itself.' ) }
+			</Warning>
+		);
+	}
+
+	if ( isMissing ) {
+		children = (
+			<Warning>
+				{ __( 'Block has been deleted or is unavailable.' ) }
+			</Warning>
+		);
+	}
+
+	if ( ! hasResolved ) {
+		children = (
+			<Placeholder>
+				<Spinner />
+			</Placeholder>
+		);
+	}
+
+	return (
+		<RecursionProvider uniqueId={ ref }>
+			<InspectorControls>
+				<PanelBody>
+					<TextControl
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+					/>
+				</PanelBody>
+			</InspectorControls>
+			{ children === null ? (
+				<div { ...innerBlocksProps } />
+			) : (
+				<div { ...blockProps }>{ children }</div>
+			) }
+		</RecursionProvider>
+	);
+}

package/src/block/{edit.native.js → v1/edit.native.js}

@@ -42,8 +42,8 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import styles from './editor.scss';
-import EditTitle from './edit-title';
+import styles from '../editor.scss';
+import EditTitle from '../edit-title';
 
 export default function ReusableBlockEdit( {
 	attributes: { ref },

package/src/button/block.json

@@ -36,8 +36,8 @@
 			"__experimentalRole": "content"
 		},
 		"text": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "a,button",
 			"__experimentalRole": "content"
 		},

package/src/button/editor.scss

@@ -28,49 +28,6 @@
 	}
 }
 
-.wp-block-button__inline-link {
-	color: $gray-700;
-	height: 0;
-	overflow: hidden;
-	max-width: 290px;
-
-	&-input__suggestions {
-		max-width: 290px;
-	}
-
-	@include break-medium() {
-		max-width: 260px;
-
-		&-input__suggestions {
-			max-width: 260px;
-		}
-
-	}
-	@include break-large() {
-		max-width: 290px;
-
-		&-input__suggestions {
-			max-width: 290px;
-		}
-
-	}
-
-	.is-selected & {
-		height: auto;
-		overflow: visible;
-	}
-}
-
-.wp-button-label__width {
-	.components-button-group {
-		display: block;
-	}
-
-	.components-base-control__field {
-		margin-bottom: 12px;
-	}
-}
-
 // Display "table" is used because the button container should only wrap the content and not takes the full width.
 div[data-type="core/button"] {
 	display: table;

package/src/button/save.js

@@ -30,7 +30,7 @@ export default function save( { attributes, className } ) {
 		width,
 	} = attributes;
 
-	if ( ! text ) {
+	if ( RichText.isEmpty( text ) ) {
 		return null;
 	}
 

package/src/button/style.scss

@@ -98,19 +98,19 @@ $blocks-block__margin: 0.5em;
 	border-radius: 0 !important;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link,
-.wp-block-button .wp-block-button__link.is-style-outline {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link,
+.wp-block-button .wp-block-button__link:where(.is-style-outline) {
 	border: 2px solid currentColor;
 	padding: 0.667em 1.333em;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color),
-.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color) {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-text-color),
+.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-text-color) {
 	color: currentColor;
 }
 
-.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background),
-.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background) {
+.wp-block-button:where(.is-style-outline) > .wp-block-button__link:not(.has-background),
+.wp-block-button .wp-block-button__link:where(.is-style-outline):not(.has-background) {
 	background-color: transparent;
 	// background-image is required to overwrite a gradient background
 	background-image: none;

package/src/buttons/test/__snapshots__/edit.native.js.snap

@@ -6,6 +6,12 @@ exports[`Buttons block color customization sets a background color 1`] = `
 <!-- /wp:buttons -->"
 `;
 
+exports[`Buttons block color customization sets a custom gradient background color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"gradient":"linear-gradient(200deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)"}}} /--></div>
+<!-- /wp:buttons -->"
+`;
+
 exports[`Buttons block color customization sets a gradient background color 1`] = `
 "<!-- wp:buttons -->
 <div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} /--></div>

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

@@ -10,6 +10,7 @@ import {
 	initializeEditor,
 	triggerBlockListLayout,
 	typeInRichText,
+	openBlockSettings,
 	waitFor,
 } from 'test/helpers';
 
@@ -391,5 +392,53 @@ describe( 'Buttons block', () => {
 			// Assert
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
+
+		it( 'sets a custom gradient background color', async () => {
+			// Arrange
+			const screen = await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open Block Settings.
+			await openBlockSettings( screen );
+
+			// Open Text color settings
+			fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+			// Tap on the gradient segment
+			fireEvent.press( screen.getByLabelText( 'Gradient' ) );
+
+			// Tap one gradient color
+			fireEvent.press(
+				screen.getByLabelText( 'Light green cyan to vivid green cyan' )
+			);
+
+			// Tap on Customize Gradient
+			fireEvent.press( screen.getByLabelText( /Customize Gradient/ ) );
+
+			// Change the current angle
+			fireEvent.press( screen.getByText( '135', { hidden: true } ) );
+			const angleTextInput = screen.getByDisplayValue( '135', {
+				hidden: true,
+			} );
+			fireEvent.changeText( angleTextInput, '200' );
+
+			// Go back to the settings list.
+			fireEvent.press( await screen.findByLabelText( 'Go back' ) );
+
+			// Assert
+			const customButton = await screen.findByText( 'CUSTOM' );
+			expect( customButton ).toBeVisible();
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
 	} );
 } );

package/src/code/block.json

@@ -8,8 +8,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"content": {
-			"type": "string",
-			"source": "html",
+			"type": "rich-text",
+			"source": "rich-text",
 			"selector": "code",
 			"__unstablePreserveWhiteSpace": true
 		}

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/comments-title/block.json

@@ -5,7 +5,7 @@
 	"title": "Comments Title",
 	"category": "theme",
 	"ancestor": [ "core/comments" ],
-	"description": "Displays a title with the number of comments",
+	"description": "Displays a title with the number of comments.",
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],
 	"attributes": {

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

@@ -220,7 +220,7 @@ export default function CoverInspectorControls( {
 						<PanelRow>
 							<Button
 								variant="secondary"
-								isSmall
+								size="small"
 								className="block-library-cover__reset-button"
 								onClick={ onClearMedia }
 							>

package/src/cover/edit.native.js

@@ -538,6 +538,7 @@ const Cover = ( {
 						<BottomSheetConsumer>
 							{ ( { shouldEnableBottomSheetScroll } ) => (
 								<ColorPalette
+									enableCustomColor={ true }
 									customColorIndicatorStyles={
 										styles.paletteColorIndicator
 									}

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/embed/util.js

@@ -7,7 +7,7 @@ import memoize from 'memize';
 /**
  * WordPress dependencies
  */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 import { renderToString } from '@wordpress/element';
 import {
 	createBlock,
@@ -23,7 +23,6 @@ import { ASPECT_RATIOS, WP_EMBED_TYPE } from './constants';
 import { unlock } from '../lock-unlock';
 
 const { name: DEFAULT_EMBED_BLOCK } = metadata;
-const { kebabCase } = unlock( blockEditorPrivateApis );
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
@@ -283,6 +282,7 @@ export const getAttributesFromPreview = memoize(
 		// If we got a provider name from the API, use it for the slug, otherwise we use the title,
 		// because not all embed code gives us a provider name.
 		const { html, provider_name: providerName } = preview;
+		const { kebabCase } = unlock( componentsPrivateApis );
 		const providerNameSlug = kebabCase(
 			( providerName || title ).toLowerCase()
 		);

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": {