@wordpress/block-library 7.5.0 → 7.8.0

package/src/block/edit.js

@@ -5,7 +5,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	useEntityBlockEditor,
 	useEntityProp,
-	__experimentalUseEntityRecord as useEntityRecord,
+	useEntityRecord,
 } from '@wordpress/core-data';
 import {
 	Placeholder,
@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	useInnerBlocksProps,
 	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
-	__experimentalBlockContentOverlay as BlockContentOverlay,
+	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 	InnerBlocks,
 	BlockControls,
 	InspectorControls,
@@ -31,9 +31,8 @@ import { store as reusableBlocksStore } from '@wordpress/reusable-blocks';
 import { ungroup } from '@wordpress/icons';
 
 export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		ref
-	);
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( ref );
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
 		'wp_block',
@@ -46,9 +45,8 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 		[ clientId ]
 	);
 
-	const {
-		__experimentalConvertBlockToStatic: convertBlockToStatic,
-	} = useDispatch( reusableBlocksStore );
+	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
+		useDispatch( reusableBlocksStore );
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',
@@ -62,20 +60,25 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 		ref
 	);
 
-	const blockProps = useBlockProps();
-
-	const innerBlocksProps = useInnerBlocksProps(
-		{},
+	const hasBlockOverlay = useBlockOverlayActive( clientId );
+	const blockProps = useBlockProps(
 		{
-			value: blocks,
-			onInput,
-			onChange,
-			renderAppender: blocks?.length
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
-		}
+			className: hasBlockOverlay
+				? 'block-library-block__reusable-block-container block-editor-block-content-overlay'
+				: 'block-library-block__reusable-block-container',
+		},
+		{ __unstableIsDisabled: hasBlockOverlay }
 	);
 
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		value: blocks,
+		onInput,
+		onChange,
+		renderAppender: blocks?.length
+			? undefined
+			: InnerBlocks.ButtonBlockAppender,
+	} );
+
 	if ( hasAlreadyRendered ) {
 		return (
 			<div { ...blockProps }>
@@ -108,36 +111,28 @@ export default function ReusableBlockEdit( { attributes: { ref }, clientId } ) {
 
 	return (
 		<RecursionProvider>
-			<div { ...blockProps }>
-				{ canRemove && (
-					<BlockControls>
-						<ToolbarGroup>
-							<ToolbarButton
-								onClick={ () =>
-									convertBlockToStatic( clientId )
-								}
-								label={ __( 'Convert to regular blocks' ) }
-								icon={ ungroup }
-								showTooltip
-							/>
-						</ToolbarGroup>
-					</BlockControls>
-				) }
-				<InspectorControls>
-					<PanelBody>
-						<TextControl
-							label={ __( 'Name' ) }
-							value={ title }
-							onChange={ setTitle }
+			{ canRemove && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ () => convertBlockToStatic( clientId ) }
+							label={ __( 'Convert to regular blocks' ) }
+							icon={ ungroup }
+							showTooltip
 						/>
-					</PanelBody>
-				</InspectorControls>
-				<BlockContentOverlay
-					clientId={ clientId }
-					wrapperProps={ innerBlocksProps }
-					className="block-library-block__reusable-block-container"
-				/>
-			</div>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
+			<InspectorControls>
+				<PanelBody>
+					<TextControl
+						label={ __( 'Name' ) }
+						value={ title }
+						onChange={ setTitle }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...innerBlocksProps } />
 		</RecursionProvider>
 	);
 }

package/src/block/edit.native.js

@@ -48,9 +48,8 @@ export default function ReusableBlockEdit( {
 	clientId,
 	isSelected,
 } ) {
-	const [ hasAlreadyRendered, RecursionProvider ] = useNoRecursiveRenders(
-		ref
-	);
+	const [ hasAlreadyRendered, RecursionProvider ] =
+		useNoRecursiveRenders( ref );
 
 	const [ showHelp, setShowHelp ] = useState( false );
 	const infoTextStyle = usePreferredColorSchemeStyle(
@@ -85,18 +84,16 @@ export default function ReusableBlockEdit( {
 				'wp_block',
 				ref
 			);
-			const hasResolvedBlock = select(
-				coreStore
-			).hasFinishedResolution( 'getEntityRecord', [
-				'postType',
-				'wp_block',
-				ref,
-			] );
+			const hasResolvedBlock = select( coreStore ).hasFinishedResolution(
+				'getEntityRecord',
+				[ 'postType', 'wp_block', ref ]
+			);
 			return {
 				hasResolved: hasResolvedBlock,
-				isEditing: select(
-					reusableBlocksStore
-				).__experimentalIsEditingReusableBlock( clientId ),
+				isEditing:
+					select(
+						reusableBlocksStore
+					).__experimentalIsEditingReusableBlock( clientId ),
 				isMissing: hasResolvedBlock && ! persistedBlock,
 			};
 		},
@@ -104,9 +101,8 @@ export default function ReusableBlockEdit( {
 	);
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const {
-		__experimentalConvertBlockToStatic: convertBlockToStatic,
-	} = useDispatch( reusableBlocksStore );
+	const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
+		useDispatch( reusableBlocksStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(

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

@@ -74,14 +74,11 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const {
-			getByA11yLabel,
-			getByTestId,
-			getByText,
-		} = await initializeEditor( {
-			initialHtml: '',
-			capabilities: { reusableBlock: true },
-		} );
+		const { getByA11yLabel, getByTestId, getByText } =
+			await initializeEditor( {
+				initialHtml: '',
+				capabilities: { reusableBlock: true },
+			} );
 
 		// Open the inserter menu.
 		fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
@@ -146,7 +143,7 @@ describe( 'Reusable block', () => {
 	} );
 
 	// Skipped until `pointerEvents: 'none'` no longer erroneously prevents
-	// triggering `onLayout*` on the element: https://git.io/JSHZt.
+	// triggering `onLayout*` on the element: https://github.com/callstack/react-native-testing-library/issues/897.
 	it.skip( 'renders block content', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const id = 4;

package/src/button/block.json

@@ -69,6 +69,7 @@
 		"typography": {
 			"fontSize": true,
 			"__experimentalFontFamily": true,
+			"__experimentalTextTransform": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
@@ -88,7 +89,30 @@
 				"radius": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-button__link"
+		"__experimentalSelector": ".wp-block-button__link",
+		"__experimentalStyle": {
+			"border": {
+				"//": "100% causes an oval, but any explicit but really high value retains the pill shape.",
+				"radius": "9999px"
+			},
+			"color": {
+				"text": "#fff",
+				"background": "#32373c"
+			},
+			"typography": {
+				"fontSize": "1.125em",
+				"textDecoration": "none"
+			},
+			"spacing": {
+				"padding": {
+					"//": "The extra 2px are added to size solids the same as the outline versions.",
+					"top": "calc(0.667em + 2px)",
+					"right": "calc(1.333em + 2px)",
+					"bottom": "calc(0.667em + 2px)",
+					"left": "calc(1.333em + 2px)"
+				}
+			}
+		}
 	},
 	"styles": [
 		{ "name": "fill", "label": "Fill", "isDefault": true },

package/src/button/deprecated.js

@@ -119,6 +119,142 @@ const blockAttributes = {
 	},
 };
 
+const v11 = {
+	attributes: {
+		url: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'href',
+		},
+		title: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'title',
+		},
+		text: {
+			type: 'string',
+			source: 'html',
+			selector: 'a',
+		},
+		linkTarget: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'target',
+		},
+		rel: {
+			type: 'string',
+			source: 'attribute',
+			selector: 'a',
+			attribute: 'rel',
+		},
+		placeholder: {
+			type: 'string',
+		},
+		backgroundColor: {
+			type: 'string',
+		},
+		textColor: {
+			type: 'string',
+		},
+		gradient: {
+			type: 'string',
+		},
+		width: {
+			type: 'number',
+		},
+	},
+	supports: {
+		anchor: true,
+		align: true,
+		alignWide: false,
+		color: {
+			__experimentalSkipSerialization: true,
+			gradients: true,
+			__experimentalDefaultControls: {
+				background: true,
+				text: true,
+			},
+		},
+		typography: {
+			fontSize: true,
+			__experimentalFontFamily: true,
+			__experimentalDefaultControls: {
+				fontSize: true,
+			},
+		},
+		reusable: false,
+		spacing: {
+			__experimentalSkipSerialization: true,
+			padding: [ 'horizontal', 'vertical' ],
+			__experimentalDefaultControls: {
+				padding: true,
+			},
+		},
+		__experimentalBorder: {
+			radius: true,
+			__experimentalSkipSerialization: true,
+			__experimentalDefaultControls: {
+				radius: true,
+			},
+		},
+		__experimentalSelector: '.wp-block-button__link',
+	},
+	save( { attributes, className } ) {
+		const { fontSize, linkTarget, rel, style, text, title, url, width } =
+			attributes;
+
+		if ( ! text ) {
+			return null;
+		}
+
+		const borderProps = getBorderClassesAndStyles( attributes );
+		const colorProps = getColorClassesAndStyles( attributes );
+		const spacingProps = getSpacingClassesAndStyles( attributes );
+		const buttonClasses = classnames(
+			'wp-block-button__link',
+			colorProps.className,
+			borderProps.className,
+			{
+				// For backwards compatibility add style that isn't provided via
+				// block support.
+				'no-border-radius': style?.border?.radius === 0,
+			}
+		);
+		const buttonStyle = {
+			...borderProps.style,
+			...colorProps.style,
+			...spacingProps.style,
+		};
+
+		// The use of a `title` attribute here is soft-deprecated, but still applied
+		// if it had already been assigned, for the sake of backward-compatibility.
+		// A title will no longer be assigned for new or updated button block links.
+
+		const wrapperClasses = classnames( className, {
+			[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+			[ `has-custom-font-size` ]: fontSize || style?.typography?.fontSize,
+		} );
+
+		return (
+			<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
+				<RichText.Content
+					tagName="a"
+					className={ buttonClasses }
+					href={ url }
+					title={ title }
+					style={ buttonStyle }
+					value={ text }
+					target={ linkTarget }
+					rel={ rel }
+				/>
+			</div>
+		);
+	},
+};
+
 const v10 = {
 	attributes: {
 		url: {
@@ -193,16 +329,8 @@ const v10 = {
 		__experimentalSelector: '.wp-block-button__link',
 	},
 	save( { attributes, className } ) {
-		const {
-			fontSize,
-			linkTarget,
-			rel,
-			style,
-			text,
-			title,
-			url,
-			width,
-		} = attributes;
+		const { fontSize, linkTarget, rel, style, text, title, url, width } =
+			attributes;
 
 		if ( ! text ) {
 			return null;
@@ -258,6 +386,7 @@ const v10 = {
 };
 
 const deprecated = [
+	v11,
 	v10,
 	{
 		supports: {
@@ -413,15 +542,8 @@ const deprecated = [
 			},
 		},
 		save( { attributes, className } ) {
-			const {
-				borderRadius,
-				linkTarget,
-				rel,
-				text,
-				title,
-				url,
-				width,
-			} = attributes;
+			const { borderRadius, linkTarget, rel, text, title, url, width } =
+				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
 			const buttonClasses = classnames(
 				'wp-block-button__link',
@@ -508,15 +630,8 @@ const deprecated = [
 			},
 		},
 		save( { attributes, className } ) {
-			const {
-				borderRadius,
-				linkTarget,
-				rel,
-				text,
-				title,
-				url,
-				width,
-			} = attributes;
+			const { borderRadius, linkTarget, rel, text, title, url, width } =
+				attributes;
 			const colorProps = getColorClassesAndStyles( attributes );
 			const buttonClasses = classnames(
 				'wp-block-button__link',
@@ -595,14 +710,8 @@ const deprecated = [
 			},
 		},
 		save( { attributes } ) {
-			const {
-				borderRadius,
-				linkTarget,
-				rel,
-				text,
-				title,
-				url,
-			} = attributes;
+			const { borderRadius, linkTarget, rel, text, title, url } =
+				attributes;
 			const buttonClasses = classnames( 'wp-block-button__link', {
 				'no-border-radius': borderRadius === 0,
 			} );

package/src/button/edit.js

@@ -25,6 +25,7 @@ import {
 	__experimentalUseColorProps as useColorProps,
 	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
 	__experimentalLinkControl as LinkControl,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -74,15 +75,8 @@ function ButtonEdit( props ) {
 		onReplace,
 		mergeBlocks,
 	} = props;
-	const {
-		linkTarget,
-		placeholder,
-		rel,
-		style,
-		text,
-		url,
-		width,
-	} = attributes;
+	const { linkTarget, placeholder, rel, style, text, url, width } =
+		attributes;
 	const onSetLinkRel = useCallback(
 		( value ) => {
 			setAttributes( { rel: value } );
@@ -156,7 +150,8 @@ function ButtonEdit( props ) {
 			<div
 				{ ...blockProps }
 				className={ classnames( blockProps.className, {
-					[ `has-custom-width wp-block-button__width-${ width }` ]: width,
+					[ `has-custom-width wp-block-button__width-${ width }` ]:
+						width,
 					[ `has-custom-font-size` ]: blockProps.style.fontSize,
 				} ) }
 			>
@@ -176,7 +171,8 @@ function ButtonEdit( props ) {
 							// For backwards compatibility add style that isn't
 							// provided via block support.
 							'no-border-radius': style?.border?.radius === 0,
-						}
+						},
+						__experimentalElementButtonClassName
 					) }
 					style={ {
 						...borderProps.style,

package/src/button/edit.native.js

@@ -95,9 +95,8 @@ function ButtonEdit( props ) {
 	const { editorSidebarOpened, numOfButtons } = useSelect(
 		( select ) => {
 			const { isEditorSidebarOpened } = select( editPostStore );
-			const { getBlockCount, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const { getBlockCount, getBlockRootClientId } =
+				select( blockEditorStore );
 			const parentId = getBlockRootClientId( clientId );
 			const blockCount = getBlockCount( parentId );
 			const currentIsEditorSidebarOpened = isEditorSidebarOpened();

package/src/button/save.js

@@ -12,19 +12,12 @@ import {
 	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalElementButtonClassName,
 } from '@wordpress/block-editor';
 
 export default function save( { attributes, className } ) {
-	const {
-		fontSize,
-		linkTarget,
-		rel,
-		style,
-		text,
-		title,
-		url,
-		width,
-	} = attributes;
+	const { fontSize, linkTarget, rel, style, text, title, url, width } =
+		attributes;
 
 	if ( ! text ) {
 		return null;
@@ -41,7 +34,8 @@ export default function save( { attributes, className } ) {
 			// For backwards compatibility add style that isn't provided via
 			// block support.
 			'no-border-radius': style?.border?.radius === 0,
-		}
+		},
+		__experimentalElementButtonClassName
 	);
 	const buttonStyle = {
 		...borderProps.style,

package/src/button/style.scss

@@ -4,14 +4,9 @@ $blocks-block__margin: 0.5em;
 // Prefer the link selector instead of the regular button classname
 // to support the previous markup in addition to the new one.
 .wp-block-button__link {
-	color: $white;
-	background-color: #32373c;
-	border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape.
 	box-shadow: none;
 	cursor: pointer;
 	display: inline-block;
-	font-size: 1.125em;
-	padding: calc(0.667em + 2px) calc(1.333em + 2px); // The extra 2px are added to size solids the same as the outline versions.
 	text-align: center;
 	text-decoration: none;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.

package/src/buttons/deprecated.js

@@ -15,11 +15,8 @@ const migrateWithLayout = ( attributes ) => {
 		return attributes;
 	}
 
-	const {
-		contentJustification,
-		orientation,
-		...updatedAttributes
-	} = attributes;
+	const { contentJustification, orientation, ...updatedAttributes } =
+		attributes;
 
 	if ( contentJustification || orientation ) {
 		Object.assign( updatedAttributes, {
@@ -67,7 +64,8 @@ const deprecated = [
 				<div
 					{ ...useBlockProps.save( {
 						className: classnames( {
-							[ `is-content-justification-${ contentJustification }` ]: contentJustification,
+							[ `is-content-justification-${ contentJustification }` ]:
+								contentJustification,
 							'is-vertical': orientation === 'vertical',
 						} ),
 					} ) }

package/src/buttons/edit.js

@@ -33,9 +33,9 @@ const DEFAULT_BLOCK = {
 function ButtonsEdit( { attributes: { layout = {} } } ) {
 	const blockProps = useBlockProps();
 	const preferredStyle = useSelect( ( select ) => {
-		const preferredStyleVariations = select(
-			blockEditorStore
-		).getSettings().__experimentalPreferredStyleVariations;
+		const preferredStyleVariations =
+			select( blockEditorStore ).getSettings()
+				.__experimentalPreferredStyleVariations;
 		return preferredStyleVariations?.value?.[ buttonBlockName ];
 	}, [] );
 

package/src/buttons/edit.native.js

@@ -49,11 +49,8 @@ export default function ButtonsEdit( {
 
 	const { isInnerButtonSelected, shouldDelete } = useSelect(
 		( select ) => {
-			const {
-				getBlockCount,
-				getBlockParents,
-				getSelectedBlockClientId,
-			} = select( blockEditorStore );
+			const { getBlockCount, getBlockParents, getSelectedBlockClientId } =
+				select( blockEditorStore );
 			const selectedBlockClientId = getSelectedBlockClientId();
 			const selectedBlockParents = getBlockParents(
 				selectedBlockClientId,
@@ -73,16 +70,15 @@ export default function ButtonsEdit( {
 	);
 
 	const preferredStyle = useSelect( ( select ) => {
-		const preferredStyleVariations = select(
-			blockEditorStore
-		).getSettings().__experimentalPreferredStyleVariations;
+		const preferredStyleVariations =
+			select( blockEditorStore ).getSettings()
+				.__experimentalPreferredStyleVariations;
 		return preferredStyleVariations?.value?.[ buttonBlockName ];
 	}, [] );
 
 	const { getBlockOrder } = useSelect( blockEditorStore );
-	const { insertBlock, removeBlock, selectBlock } = useDispatch(
-		blockEditorStore
-	);
+	const { insertBlock, removeBlock, selectBlock } =
+		useDispatch( blockEditorStore );
 
 	useEffect( () => {
 		const { width } = sizes || {};

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

@@ -21,7 +21,7 @@ exports[`Buttons block justify content sets Justify items right option 1`] = `
 exports[`Buttons block when a button is shown adjusts the border radius 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button {\\"style\\":{\\"border\\":{\\"radius\\":\\"6px\\"}}} -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;

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

@@ -32,7 +32,7 @@ describe( 'Buttons block', () => {
 		it( 'adjusts the border radius', async () => {
 			const initialHtml = `<!-- wp:buttons -->
 			<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
-			<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:5px" >Hello</a></div>
+			<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px" >Hello</a></div>
 			<!-- /wp:button --></div>
 			<!-- /wp:buttons -->`;
 			const { getByA11yLabel } = await initializeEditor( {

package/src/categories/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/categories",
-	"title": "Categories",
+	"title": "Categories List",
 	"category": "widgets",
 	"description": "Display a list of all categories.",
 	"textdomain": "default",