@wordpress/block-library 8.18.1-next.5a1d1283.0 → 8.19.0

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

@@ -133,7 +133,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
           ]
         }
       >
-        <View
+        <RCTAztecView
           accessibilityState={
             {
               "busy": undefined,
@@ -143,73 +143,59 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityValue={
+          accessible={true}
+          activeFormats={[]}
+          blockType={
             {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
+              "tag": "p",
             }
           }
-          accessible={false}
-          collapsable={false}
+          deleteEnter={true}
+          disableEditingMenu={false}
           focusable={true}
+          fontFamily="serif"
+          fontSize={14}
+          isMultiline={false}
+          maxImagesWidth={200}
+          onBackspace={[Function]}
           onBlur={[Function]}
+          onChange={[Function]}
           onClick={[Function]}
+          onContentSizeChange={[Function]}
+          onEnter={[Function]}
           onFocus={[Function]}
+          onHTMLContentWithCursor={[Function]}
+          onKeyDown={[Function]}
+          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
+          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-        >
-          <RCTAztecView
-            activeFormats={[]}
-            blockType={
-              {
-                "tag": "p",
-              }
-            }
-            deleteEnter={true}
-            disableEditingMenu={false}
-            fontFamily="serif"
-            fontSize={14}
-            isMultiline={false}
-            maxImagesWidth={200}
-            onBackspace={[Function]}
-            onBlur={[Function]}
-            onChange={[Function]}
-            onContentSizeChange={[Function]}
-            onEnter={[Function]}
-            onFocus={[Function]}
-            onHTMLContentWithCursor={[Function]}
-            onKeyDown={[Function]}
-            onPaste={[Function]}
-            onSelectionChange={[Function]}
-            placeholder="Add caption"
-            placeholderTextColor="gray"
-            selectionColor="black"
-            style={
-              {
-                "backgroundColor": undefined,
-                "maxWidth": undefined,
-                "minHeight": 0,
-              }
+          placeholder="Add caption"
+          placeholderTextColor="gray"
+          selectionColor="black"
+          style={
+            {
+              "backgroundColor": undefined,
+              "maxWidth": undefined,
+              "minHeight": 0,
             }
-            text={
-              {
-                "eventCount": undefined,
-                "linkTextColor": undefined,
-                "selection": null,
-                "tag": "p",
-                "text": "",
-              }
+          }
+          text={
+            {
+              "eventCount": undefined,
+              "linkTextColor": undefined,
+              "selection": null,
+              "tag": "p",
+              "text": "",
             }
-            textAlign="center"
-            triggerKeyCodes={[]}
-          />
-        </View>
+          }
+          textAlign="center"
+          triggerKeyCodes={[]}
+        />
       </View>
     </View>
   </View>
@@ -373,7 +359,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
           ]
         }
       >
-        <View
+        <RCTAztecView
           accessibilityState={
             {
               "busy": undefined,
@@ -383,73 +369,59 @@ exports[`Audio block renders audio file without crashing 1`] = `
               "selected": undefined,
             }
           }
-          accessibilityValue={
+          accessible={true}
+          activeFormats={[]}
+          blockType={
             {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
+              "tag": "p",
             }
           }
-          accessible={false}
-          collapsable={false}
+          deleteEnter={true}
+          disableEditingMenu={false}
           focusable={true}
+          fontFamily="serif"
+          fontSize={14}
+          isMultiline={false}
+          maxImagesWidth={200}
+          onBackspace={[Function]}
           onBlur={[Function]}
+          onChange={[Function]}
           onClick={[Function]}
+          onContentSizeChange={[Function]}
+          onEnter={[Function]}
           onFocus={[Function]}
+          onHTMLContentWithCursor={[Function]}
+          onKeyDown={[Function]}
+          onPaste={[Function]}
           onResponderGrant={[Function]}
           onResponderMove={[Function]}
           onResponderRelease={[Function]}
           onResponderTerminate={[Function]}
           onResponderTerminationRequest={[Function]}
+          onSelectionChange={[Function]}
           onStartShouldSetResponder={[Function]}
-        >
-          <RCTAztecView
-            activeFormats={[]}
-            blockType={
-              {
-                "tag": "p",
-              }
-            }
-            deleteEnter={true}
-            disableEditingMenu={false}
-            fontFamily="serif"
-            fontSize={14}
-            isMultiline={false}
-            maxImagesWidth={200}
-            onBackspace={[Function]}
-            onBlur={[Function]}
-            onChange={[Function]}
-            onContentSizeChange={[Function]}
-            onEnter={[Function]}
-            onFocus={[Function]}
-            onHTMLContentWithCursor={[Function]}
-            onKeyDown={[Function]}
-            onPaste={[Function]}
-            onSelectionChange={[Function]}
-            placeholder="Add caption"
-            placeholderTextColor="gray"
-            selectionColor="black"
-            style={
-              {
-                "backgroundColor": undefined,
-                "maxWidth": undefined,
-                "minHeight": 0,
-              }
+          placeholder="Add caption"
+          placeholderTextColor="gray"
+          selectionColor="black"
+          style={
+            {
+              "backgroundColor": undefined,
+              "maxWidth": undefined,
+              "minHeight": 0,
             }
-            text={
-              {
-                "eventCount": undefined,
-                "linkTextColor": undefined,
-                "selection": null,
-                "tag": "p",
-                "text": "",
-              }
+          }
+          text={
+            {
+              "eventCount": undefined,
+              "linkTextColor": undefined,
+              "selection": null,
+              "tag": "p",
+              "text": "",
             }
-            textAlign="center"
-            triggerKeyCodes={[]}
-          />
-        </View>
+          }
+          textAlign="center"
+          triggerKeyCodes={[]}
+        />
       </View>
     </View>
   </View>

package/src/avatar/index.php

@@ -112,12 +112,12 @@ function get_block_core_avatar_border_attributes( $attributes ) {
 
 	// Border color.
 	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
-	$custom_color           = _wp_array_get( $attributes, array( 'style', 'border', 'color' ), null );
+	$custom_color           = $attributes['style']['border']['color'] ?? null;
 	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
 
 	// Individual border styles e.g. top, left etc.
 	foreach ( $sides as $side ) {
-		$border                 = _wp_array_get( $attributes, array( 'style', 'border', $side ), null );
+		$border                 = $attributes['style']['border'][ $side ] ?? null;
 		$border_styles[ $side ] = array(
 			'color' => isset( $border['color'] ) ? $border['color'] : null,
 			'style' => isset( $border['style'] ) ? $border['style'] : null,

package/src/block/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -21,9 +26,52 @@ import {
 	InspectorControls,
 	useBlockProps,
 	Warning,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
+import { useRef, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+
+const fullAlignments = [ 'full', 'wide', 'left', 'right' ];
+
+const useInferredLayout = ( blocks, parentLayout ) => {
+	const initialInferredAlignmentRef = useRef();
 
-export default function ReusableBlockEdit( { attributes: { ref } } ) {
+	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 { useLayoutClasses } = unlock( blockEditorPrivateApis );
 	const hasAlreadyRendered = useHasRecursion( ref );
 	const { record, hasResolved } = useEntityRecord(
 		'postType',
@@ -45,12 +93,20 @@ export default function ReusableBlockEdit( { attributes: { ref } } ) {
 		ref
 	);
 
+	const { alignment, layout } = useInferredLayout( blocks, parentLayout );
+	const layoutClasses = useLayoutClasses( { layout }, name );
+
 	const blockProps = useBlockProps( {
-		className: 'block-library-block__reusable-block-container',
+		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

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

@@ -165,9 +165,8 @@ describe( 'Synced patterns', () => {
 			/Pattern Block\. Row 1/
 		);
 
-		const innerBlockListWrapper = await within(
-			reusableBlock
-		).findByTestId( 'block-list-wrapper' );
+		const innerBlockListWrapper =
+			await within( reusableBlock ).findByTestId( 'block-list-wrapper' );
 
 		// onLayout event has to be explicitly dispatched in BlockList component,
 		// otherwise the inner blocks are not rendered.

package/src/button/block.json

@@ -9,6 +9,15 @@
 	"keywords": [ "link" ],
 	"textdomain": "default",
 	"attributes": {
+		"tagName": {
+			"type": "string",
+			"enum": [ "a", "button" ],
+			"default": "a"
+		},
+		"type": {
+			"type": "string",
+			"default": "button"
+		},
 		"textAlign": {
 			"type": "string"
 		},
@@ -22,14 +31,14 @@
 		"title": {
 			"type": "string",
 			"source": "attribute",
-			"selector": "a",
+			"selector": "a,button",
 			"attribute": "title",
 			"__experimentalRole": "content"
 		},
 		"text": {
 			"type": "string",
 			"source": "html",
-			"selector": "a",
+			"selector": "a,button",
 			"__experimentalRole": "content"
 		},
 		"linkTarget": {

package/src/button/edit.js

@@ -78,8 +78,19 @@ function ButtonEdit( props ) {
 		onReplace,
 		mergeBlocks,
 	} = props;
-	const { textAlign, linkTarget, placeholder, rel, style, text, url, width } =
-		attributes;
+	const {
+		tagName,
+		textAlign,
+		linkTarget,
+		placeholder,
+		rel,
+		style,
+		text,
+		url,
+		width,
+	} = attributes;
+
+	const TagName = tagName || 'a';
 
 	function onToggleOpenInNewTab( value ) {
 		const newLinkTarget = value ? '_blank' : undefined;
@@ -128,6 +139,7 @@ function ButtonEdit( props ) {
 	const [ isEditingURL, setIsEditingURL ] = useState( false );
 	const isURLSet = !! url;
 	const opensInNewTab = linkTarget === '_blank';
+	const isLinkTag = 'a' === TagName;
 
 	function startEditing( event ) {
 		event.preventDefault();
@@ -209,7 +221,7 @@ function ButtonEdit( props ) {
 						setAttributes( { textAlign: nextAlign } );
 					} }
 				/>
-				{ ! isURLSet && (
+				{ ! isURLSet && isLinkTag && (
 					<ToolbarButton
 						name="link"
 						icon={ link }
@@ -218,7 +230,7 @@ function ButtonEdit( props ) {
 						onClick={ startEditing }
 					/>
 				) }
-				{ isURLSet && (
+				{ isURLSet && isLinkTag && (
 					<ToolbarButton
 						name="link"
 						icon={ linkOff }
@@ -229,7 +241,7 @@ function ButtonEdit( props ) {
 					/>
 				) }
 			</BlockControls>
-			{ isSelected && ( isEditingURL || isURLSet ) && (
+			{ isLinkTag && isSelected && ( isEditingURL || isURLSet ) && (
 				<Popover
 					placement="bottom"
 					onClose={ () => {
@@ -268,12 +280,16 @@ function ButtonEdit( props ) {
 				/>
 			</InspectorControls>
 			<InspectorControls group="advanced">
-				<TextControl
-					__nextHasNoMarginBottom
-					label={ __( 'Link rel' ) }
-					value={ rel || '' }
-					onChange={ ( newRel ) => setAttributes( { rel: newRel } ) }
-				/>
+				{ isLinkTag && (
+					<TextControl
+						__nextHasNoMarginBottom
+						label={ __( 'Link rel' ) }
+						value={ rel || '' }
+						onChange={ ( newRel ) =>
+							setAttributes( { rel: newRel } )
+						}
+					/>
+				) }
 			</InspectorControls>
 		</>
 	);

package/src/button/save.js

@@ -17,6 +17,8 @@ import {
 
 export default function save( { attributes, className } ) {
 	const {
+		tagName,
+		type,
 		textAlign,
 		fontSize,
 		linkTarget,
@@ -32,6 +34,9 @@ export default function save( { attributes, className } ) {
 		return null;
 	}
 
+	const TagName = tagName || 'a';
+	const isButtonTag = 'button' === TagName;
+	const buttonType = type || 'button';
 	const borderProps = getBorderClassesAndStyles( attributes );
 	const colorProps = getColorClassesAndStyles( attributes );
 	const spacingProps = getSpacingClassesAndStyles( attributes );
@@ -65,14 +70,15 @@ export default function save( { attributes, className } ) {
 	return (
 		<div { ...useBlockProps.save( { className: wrapperClasses } ) }>
 			<RichText.Content
-				tagName="a"
+				tagName={ TagName }
+				type={ isButtonTag ? buttonType : null }
 				className={ buttonClasses }
-				href={ url }
+				href={ isButtonTag ? null : url }
 				title={ title }
 				style={ buttonStyle }
 				value={ text }
-				target={ linkTarget }
-				rel={ rel }
+				target={ isButtonTag ? null : linkTarget }
+				rel={ isButtonTag ? null : rel }
 			/>
 		</div>
 	);

package/src/buttons/edit.js

@@ -12,6 +12,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -42,17 +43,26 @@ function ButtonsEdit( { attributes, className } ) {
 			'has-custom-font-size': fontSize || style?.typography?.fontSize,
 		} ),
 	} );
-	const preferredStyle = useSelect( ( select ) => {
+	const { preferredStyle, hasButtonVariations } = useSelect( ( select ) => {
 		const preferredStyleVariations =
 			select( blockEditorStore ).getSettings()
 				.__experimentalPreferredStyleVariations;
-		return preferredStyleVariations?.value?.[ buttonBlockName ];
+		const buttonVariations = select( blocksStore ).getBlockVariations(
+			buttonBlockName,
+			'inserter'
+		);
+		return {
+			preferredStyle:
+				preferredStyleVariations?.value?.[ buttonBlockName ],
+			hasButtonVariations: buttonVariations.length > 0,
+		};
 	}, [] );
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
 		defaultBlock: DEFAULT_BLOCK,
-		directInsert: true,
+		// This check should be handled by the `Inserter` internally to be consistent across all blocks that use it.
+		directInsert: ! hasButtonVariations,
 		template: [
 			[
 				buttonBlockName,

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

@@ -55,9 +55,10 @@ describe( 'Buttons block', () => {
 
 			// onLayout event has to be explicitly dispatched in BlockList component,
 			// otherwise the inner blocks are not rendered.
-			const innerBlockListWrapper = await within(
-				buttonsBlock
-			).findByTestId( 'block-list-wrapper' );
+			const innerBlockListWrapper =
+				await within( buttonsBlock ).findByTestId(
+					'block-list-wrapper'
+				);
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -66,19 +67,18 @@ describe( 'Buttons block', () => {
 				},
 			} );
 
-			const [ buttonInnerBlock ] = await within(
-				buttonsBlock
-			).findAllByLabelText( /Button Block\. Row 1/ );
+			const [ buttonInnerBlock ] =
+				await within( buttonsBlock ).findAllByLabelText(
+					/Button Block\. Row 1/
+				);
 			fireEvent.press( buttonInnerBlock );
 
-			const settingsButton = await editor.findByLabelText(
-				'Open Settings'
-			);
+			const settingsButton =
+				await editor.findByLabelText( 'Open Settings' );
 			fireEvent.press( settingsButton );
 
-			const radiusStepper = await editor.findByLabelText(
-				/Border Radius/
-			);
+			const radiusStepper =
+				await editor.findByLabelText( /Border Radius/ );
 
 			const incrementButton = await within( radiusStepper ).findByTestId(
 				'Increment',
@@ -98,9 +98,10 @@ describe( 'Buttons block', () => {
 			const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await within(
-				buttonsBlock
-			).findByTestId( 'block-list-wrapper' );
+			const innerBlockListWrapper =
+				await within( buttonsBlock ).findByTestId(
+					'block-list-wrapper'
+				);
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -119,9 +120,10 @@ describe( 'Buttons block', () => {
 			fireEvent.press( appenderButton );
 
 			// Check for new button
-			const [ secondButtonBlock ] = await within(
-				buttonsBlock
-			).findAllByLabelText( /Button Block\. Row 2/ );
+			const [ secondButtonBlock ] =
+				await within( buttonsBlock ).findAllByLabelText(
+					/Button Block\. Row 2/
+				);
 			expect( secondButtonBlock ).toBeVisible();
 
 			// Add a Paragraph block using the empty placeholder at the bottom
@@ -148,9 +150,10 @@ describe( 'Buttons block', () => {
 			fireEvent.press( buttonsBlock );
 
 			// Trigger inner blocks layout
-			const innerBlockListWrapper = await within(
-				buttonsBlock
-			).findByTestId( 'block-list-wrapper' );
+			const innerBlockListWrapper =
+				await within( buttonsBlock ).findByTestId(
+					'block-list-wrapper'
+				);
 			fireEvent( innerBlockListWrapper, 'layout', {
 				nativeEvent: {
 					layout: {
@@ -207,9 +210,10 @@ describe( 'Buttons block', () => {
 				const buttonsBlock = await getBlock( screen, 'Buttons' );
 
 				// Trigger inner blocks layout
-				const innerBlockListWrapper = await within(
-					buttonsBlock
-				).findByTestId( 'block-list-wrapper' );
+				const innerBlockListWrapper =
+					await within( buttonsBlock ).findByTestId(
+						'block-list-wrapper'
+					);
 				fireEvent( innerBlockListWrapper, 'layout', {
 					nativeEvent: {
 						layout: {

package/src/calendar/index.php

@@ -44,12 +44,12 @@ function render_block_core_calendar( $attributes ) {
 
 	// Text color.
 	$preset_text_color          = array_key_exists( 'textColor', $attributes ) ? "var:preset|color|{$attributes['textColor']}" : null;
-	$custom_text_color          = _wp_array_get( $attributes, array( 'style', 'color', 'text' ), null );
+	$custom_text_color          = $attributes['style']['color']['text'] ?? null;
 	$color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
 
 	// Background Color.
 	$preset_background_color          = array_key_exists( 'backgroundColor', $attributes ) ? "var:preset|color|{$attributes['backgroundColor']}" : null;
-	$custom_background_color          = _wp_array_get( $attributes, array( 'style', 'color', 'background' ), null );
+	$custom_background_color          = $attributes['style']['color']['background'] ?? null;
 	$color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
 
 	// Generate color styles and classes.

package/src/code/block.json

@@ -10,7 +10,8 @@
 		"content": {
 			"type": "string",
 			"source": "html",
-			"selector": "code"
+			"selector": "code",
+			"__unstablePreserveWhiteSpace": true
 		}
 	},
 	"supports": {