@wordpress/block-library 9.3.0 → 9.5.0

package/src/button/index.php

@@ -17,20 +17,7 @@
  * @return string The block content.
  */
 function render_block_core_button( $attributes, $content ) {
-	/*
-	 * The current Gutenberg plugin supports WordPress 6.4, but the next_token()
-	 * method does not exist in WordPress 6.4. Therefore, if Gutenberg is used
-	 * as a plugin, use the Gutenberg class that has the `next_token()` method.
-	 *
-	 * TODO: After the Gutenberg plugin drops support for WordPress 6.4, this
-	 * conditional statement will be removed and the core class `WP_HTML_Tag_Processor`
-	 * should be used.
-	 */
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && class_exists( 'Gutenberg_HTML_Tag_Processor_6_5' ) ) {
-		$p = new Gutenberg_HTML_Tag_Processor_6_5( $content );
-	} else {
-		$p = new WP_HTML_Tag_Processor( $content );
-	}
+	$p = new WP_HTML_Tag_Processor( $content );
 
 	/*
 	 * The button block can render an `<a>` or `<button>` and also has a

package/src/buttons/block.json

@@ -13,8 +13,16 @@
 		"align": [ "wide", "full" ],
 		"html": false,
 		"__experimentalExposeControlsToChildren": true,
+		"color": {
+			"gradients": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
 		"spacing": {
 			"blockGap": true,
+			"padding": true,
 			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true
@@ -33,6 +41,18 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
 		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,

package/src/buttons/index.js

@@ -21,6 +21,12 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
+		attributes: {
+			layout: {
+				type: 'flex',
+				justifyContent: 'center',
+			},
+		},
 		innerBlocks: [
 			{
 				name: 'core/button',

package/src/categories/block.json

@@ -26,6 +26,14 @@
 		"showEmpty": {
 			"type": "boolean",
 			"default": false
+		},
+		"label": {
+			"type": "string",
+			"__experimentalRole": "content"
+		},
+		"showLabel": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {
@@ -54,6 +62,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-categories-editor",

package/src/categories/edit.js

@@ -14,7 +14,11 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useBlockProps,
+	RichText,
+} from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { pin } from '@wordpress/icons';
@@ -27,6 +31,8 @@ export default function CategoriesEdit( {
 		showPostCounts,
 		showOnlyTopLevel,
 		showEmpty,
+		label,
+		showLabel,
 	},
 	setAttributes,
 	className,
@@ -92,9 +98,22 @@ export default function CategoriesEdit( {
 		const categoriesList = getCategoriesList( parentId );
 		return (
 			<>
-				<VisuallyHidden as="label" htmlFor={ selectId }>
-					{ __( 'Categories' ) }
-				</VisuallyHidden>
+				{ showLabel ? (
+					<RichText
+						className="wp-block-categories__label"
+						aria-label={ __( 'Label text' ) }
+						placeholder={ __( 'Categories' ) }
+						withoutInteractiveFormatting
+						value={ label }
+						onChange={ ( html ) =>
+							setAttributes( { label: html } )
+						}
+					/>
+				) : (
+					<VisuallyHidden as="label" htmlFor={ selectId }>
+						{ label ? label : __( 'Categories' ) }
+					</VisuallyHidden>
+				) }
 				<select id={ selectId }>
 					<option>{ __( 'Select Category' ) }</option>
 					{ categoriesList.map( ( category ) =>
@@ -148,6 +167,15 @@ export default function CategoriesEdit( {
 						checked={ displayAsDropdown }
 						onChange={ toggleAttribute( 'displayAsDropdown' ) }
 					/>
+					{ displayAsDropdown && (
+						<ToggleControl
+							__nextHasNoMarginBottom
+							className="wp-block-categories__indentation"
+							label={ __( 'Show label' ) }
+							checked={ showLabel }
+							onChange={ toggleAttribute( 'showLabel' ) }
+						/>
+					) }
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Show post counts' ) }

package/src/categories/editor.scss

@@ -10,3 +10,7 @@
 [data-align="center"] .wp-block-categories {
 	text-align: center;
 }
+
+.wp-block-categories__indentation {
+	padding-left: 16px;
+}

package/src/categories/index.php

@@ -34,7 +34,10 @@ function render_block_core_categories( $attributes ) {
 		$id                       = 'wp-block-categories-' . $block_id;
 		$args['id']               = $id;
 		$args['show_option_none'] = __( 'Select Category' );
-		$wrapper_markup           = '<div %1$s><label class="screen-reader-text" for="' . esc_attr( $id ) . '">' . __( 'Categories' ) . '</label>%2$s</div>';
+		$show_label               = empty( $attributes['showLabel'] ) ? ' screen-reader-text' : '';
+		$default_label            = __( 'Categories' );
+		$label_text               = ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+		$wrapper_markup           = '<div %1$s><label class="wp-block-categories__label' . $show_label . '" for="' . esc_attr( $id ) . '">' . $label_text . '</label>%2$s</div>';
 		$items_markup             = wp_dropdown_categories( $args );
 		$type                     = 'dropdown';
 

package/src/categories/style.scss

@@ -14,4 +14,8 @@
 	&.wp-block-categories-dropdown.aligncenter {
 		text-align: center;
 	}
+	& .wp-block-categories__label {
+		width: 100%;
+		display: block;
+	}
 }

package/src/column/block.json

@@ -48,10 +48,12 @@
 		},
 		"__experimentalBorder": {
 			"color": true,
+			"radius": true,
 			"style": true,
 			"width": true,
 			"__experimentalDefaultControls": {
 				"color": true,
+				"radius": true,
 				"style": true,
 				"width": true
 			}

package/src/column/edit.js

@@ -33,8 +33,8 @@ function ColumnInspectorControls( { width, setAttributes } ) {
 		<PanelBody title={ __( 'Settings' ) }>
 			<UnitControl
 				label={ __( 'Width' ) }
-				labelPosition="edge"
-				__unstableInputWidth="80px"
+				__unstableInputWidth="calc(50% - 8px)"
+				__next40pxDefaultSize
 				value={ width || '' }
 				onChange={ ( nextWidth ) => {
 					nextWidth = 0 > parseFloat( nextWidth ) ? '0' : nextWidth;

package/src/columns/index.js

@@ -23,7 +23,7 @@ export const settings = {
 	icon,
 	variations,
 	example: {
-		viewportWidth: 600, // Columns collapse "@media (max-width: 599px)".
+		viewportWidth: 782, // Columns collapse "@media (max-width: 781px)".
 		innerBlocks: [
 			{
 				name: 'core/column',

package/src/comment-template/block.json

@@ -31,6 +31,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-comment-template"

package/src/comments-title/block.json

@@ -23,6 +23,9 @@
 		"level": {
 			"type": "number",
 			"default": 2
+		},
+		"levelOptions": {
+			"type": "array"
 		}
 	},
 	"supports": {

package/src/comments-title/edit.js

@@ -23,7 +23,13 @@ import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
 
 export default function Edit( {
-	attributes: { textAlign, showPostTitle, showCommentsCount, level },
+	attributes: {
+		textAlign,
+		showPostTitle,
+		showCommentsCount,
+		level,
+		levelOptions,
+	},
 	setAttributes,
 	context: { postType, postId },
 } ) {
@@ -95,6 +101,7 @@ export default function Edit( {
 			/>
 			<HeadingLevelDropdown
 				value={ level }
+				options={ levelOptions }
 				onChange={ ( newLevel ) =>
 					setAttributes( { level: newLevel } )
 				}

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

@@ -260,6 +260,7 @@ export default function CoverInspectorControls( {
 									gradient: undefined,
 									customGradient: undefined,
 								} ),
+								clearable: true,
 							},
 						] }
 						panelId={ clientId }

package/src/details/edit.js

@@ -48,6 +48,7 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Open by default' ) }
 						checked={ showContent }
 						onChange={ () =>

package/src/editor.scss

@@ -44,6 +44,7 @@
 @import "./social-links/editor.scss";
 @import "./spacer/editor.scss";
 @import "./table/editor.scss";
+@import "./tag-cloud/editor.scss";
 @import "./template-part/editor.scss";
 @import "./text-columns/editor.scss";
 @import "./video/editor.scss";

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

@@ -106,21 +106,21 @@ exports[`Embed block edit URL sets empty state when setting an empty URL 1`] = `
 
 exports[`Embed block insert via slash inserter insert generic embed block 1`] = `"<!-- wp:embed /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Twitter embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Twitter Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts Vimeo embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts Vimeo Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts WordPress embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
+exports[`Embed block insert via slash inserter inserts WordPress Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insert via slash inserter inserts YouTube embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
+exports[`Embed block insert via slash inserter inserts YouTube Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Twitter embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
+exports[`Embed block insertion inserts Twitter Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"twitter","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts Vimeo embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
+exports[`Embed block insertion inserts Vimeo Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"vimeo","responsive":true} /-->"`;
 
-exports[`Embed block insertion inserts WordPress embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
+exports[`Embed block insertion inserts WordPress Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"wordpress"} /-->"`;
 
-exports[`Embed block insertion inserts YouTube embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
+exports[`Embed block insertion inserts YouTube Embed block 1`] = `"<!-- wp:embed {"providerNameSlug":"youtube","responsive":true} /-->"`;
 
 exports[`Embed block insertion inserts generic embed block 1`] = `"<!-- wp:embed /-->"`;
 

package/src/embed/test/index.js

@@ -200,7 +200,7 @@ describe( 'utils', () => {
 			expect( getEmbedInfoByProvider( 'instagram' ) ).toEqual(
 				expect.objectContaining( {
 					icon: embedInstagramIcon,
-					title: 'Instagram',
+					title: 'Instagram Embed',
 				} )
 			);
 		} );

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

@@ -230,7 +230,7 @@ describe( 'Embed block', () => {
 		} );
 
 		MOST_USED_PROVIDERS.forEach( ( { title } ) =>
-			it( `inserts ${ title } embed block`, async () => {
+			it( `inserts ${ title } block`, async () => {
 				const { block } = await insertEmbedBlock( title );
 				const blockName = within( block ).getByText( title );
 
@@ -285,10 +285,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -321,10 +321,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ clipboardURL }` );
+			).getByLabelText( `Twitter Embed link, ${ clipboardURL }` );
 
 			expect( autopastedLinkField ).toBeDefined();
 			expect( twitterLinkField ).toBeDefined();
@@ -383,10 +383,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -422,10 +422,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ clipboardURL }` );
+			).getByLabelText( `Twitter Embed link, ${ clipboardURL }` );
 
 			expect( embedLink ).toBeDefined();
 			expect( twitterLinkField ).toBeDefined();
@@ -472,10 +472,10 @@ describe( 'Embed block', () => {
 			);
 			await waitForModalVisible( blockSettingsModal );
 
-			// Start editing link.
+			// Start editing Embed link.
 			fireEvent.press(
 				within( blockSettingsModal ).getByLabelText(
-					`Twitter link, ${ initialURL }`
+					`Twitter Embed link, ${ initialURL }`
 				)
 			);
 
@@ -491,10 +491,10 @@ describe( 'Embed block', () => {
 			await waitFor( () => editor.UNSAFE_getByType( WebView ) );
 			await editor.findByText( 'Media settings' );
 
-			// Get YouTube link field.
+			// Get YouTube Embed link field.
 			const youtubeLinkField = await within(
 				blockSettingsModal
-			).findByLabelText( `YouTube link, ${ expectedURL }` );
+			).findByLabelText( `YouTube Embed link, ${ expectedURL }` );
 
 			expect( youtubeLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -519,7 +519,7 @@ describe( 'Embed block', () => {
 			// Start editing link.
 			fireEvent.press(
 				within( blockSettingsModal ).getByLabelText(
-					`Twitter link, ${ previousURL }`
+					`Twitter Embed link, ${ previousURL }`
 				)
 			);
 
@@ -557,7 +557,7 @@ describe( 'Embed block', () => {
 			// Start editing link.
 			fireEvent.press(
 				within( blockSettingsModal ).getByLabelText(
-					`Twitter link, ${ previousURL }`
+					`Twitter Embed link, ${ previousURL }`
 				)
 			);
 
@@ -661,10 +661,10 @@ describe( 'Embed block', () => {
 			fireEvent( blockSettingsModal, 'backdropPress' );
 			fireEvent( blockSettingsModal, MODAL_DISMISS_EVENT );
 
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = await within(
 				blockSettingsModal
-			).findByLabelText( `Twitter link, ${ expectedURL }` );
+			).findByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -728,10 +728,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter Embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ expectedURL }` );
+			).getByLabelText( `Twitter Embed link, ${ expectedURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -811,10 +811,10 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = await editor.findByTestId(
 				'block-settings-modal'
 			);
-			// Get Twitter link field.
+			// Get Twitter embed link field.
 			const twitterLinkField = within(
 				blockSettingsModal
-			).getByLabelText( `Twitter link, ${ successURL }` );
+			).getByLabelText( `Twitter Embed link, ${ successURL }` );
 
 			expect( twitterLinkField ).toBeDefined();
 			expect( getEditorHtml() ).toMatchSnapshot();
@@ -1000,8 +1000,9 @@ describe( 'Embed block', () => {
 		} );
 
 		MOST_USED_PROVIDERS.forEach( ( { title } ) =>
-			it( `inserts ${ title } embed block`, async () => {
-				const embedBlockSlashInserter = `/${ title }`;
+			it( `inserts ${ title } block`, async () => {
+				// Get just the first word of the title ("Twitter") as the full title ("Twitter Embed") breaks the test.
+				const embedBlockSlashInserter = `/${ title.split( ' ' )[ 0 ] }`;
 				const editor = await initializeEditor( {
 					initialHtml: EMPTY_PARAGRAPH_HTML,
 				} );