@wordpress/block-library 8.18.0 → 8.19.0

package/build-style/style.css

@@ -904,6 +904,15 @@
 .wp-block-cover-image.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container,
 .wp-block-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
   margin: 0;
+}
+.wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-top-left .wp-block-cover__inner-container, .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-top-right .wp-block-cover__inner-container, .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container, .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-center-right .wp-block-cover__inner-container, .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container, .wp-block-cover-image.has-custom-content-position.has-custom-content-position.is-position-bottom-right .wp-block-cover__inner-container,
+.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-top-left .wp-block-cover__inner-container,
+.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-top-right .wp-block-cover__inner-container,
+.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-center-left .wp-block-cover__inner-container,
+.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-center-right .wp-block-cover__inner-container,
+.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-left .wp-block-cover__inner-container,
+.wp-block-cover.has-custom-content-position.has-custom-content-position.is-position-bottom-right .wp-block-cover__inner-container {
+  margin: 0;
   width: auto;
 }
 .wp-block-cover-image .wp-block-cover__image-background,
@@ -1135,6 +1144,11 @@ section.wp-block-cover-image > h2,
   margin-bottom: 1em;
 }
 
+@media (max-width: 768px) {
+  .wp-block-file__embed {
+    display: none;
+  }
+}
 :where(.wp-block-file__button) {
   border-radius: 2em;
   padding: 0.5em 1em;
@@ -1479,6 +1493,19 @@ h5.has-background,
 h6.has-background {
   padding: 1.25em 2.375em;
 }
+h1.has-text-align-right[style*=writing-mode]:where([style*="vertical-rl"]), h1.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]),
+h2.has-text-align-right[style*=writing-mode]:where([style*="vertical-rl"]),
+h2.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]),
+h3.has-text-align-right[style*=writing-mode]:where([style*="vertical-rl"]),
+h3.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]),
+h4.has-text-align-right[style*=writing-mode]:where([style*="vertical-rl"]),
+h4.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]),
+h5.has-text-align-right[style*=writing-mode]:where([style*="vertical-rl"]),
+h5.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]),
+h6.has-text-align-right[style*=writing-mode]:where([style*="vertical-rl"]),
+h6.has-text-align-left[style*=writing-mode]:where([style*="vertical-lr"]) {
+  rotate: 180deg;
+}
 
 .wp-block-image img {
   height: auto;
@@ -2633,6 +2660,11 @@ p.has-background {
   color: inherit;
 }
 
+p.has-text-align-right[style*="writing-mode:vertical-rl"],
+p.has-text-align-left[style*="writing-mode:vertical-lr"] {
+  rotate: 180deg;
+}
+
 .wp-block-post-author {
   display: flex;
   flex-wrap: wrap;
@@ -2824,6 +2856,9 @@ p.has-background {
 .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-next:not(.is-arrow-chevron) {
   transform: scaleX(1) /*rtl:scaleX(-1);*/;
 }
+.wp-block-post-navigation-link.has-text-align-right[style*="writing-mode: vertical-rl"], .wp-block-post-navigation-link.has-text-align-left[style*="writing-mode: vertical-lr"] {
+  rotate: 180deg;
+}
 
 .wp-block-post-terms {
   box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.18.0",
+	"version": "8.19.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.41.0",
-		"@wordpress/api-fetch": "^6.38.0",
-		"@wordpress/autop": "^3.41.0",
-		"@wordpress/blob": "^3.41.0",
-		"@wordpress/block-editor": "^12.9.0",
-		"@wordpress/blocks": "^12.18.0",
-		"@wordpress/components": "^25.7.0",
-		"@wordpress/compose": "^6.18.0",
-		"@wordpress/core-data": "^6.18.0",
-		"@wordpress/data": "^9.11.0",
-		"@wordpress/date": "^4.41.0",
-		"@wordpress/deprecated": "^3.41.0",
-		"@wordpress/dom": "^3.41.0",
-		"@wordpress/element": "^5.18.0",
-		"@wordpress/escape-html": "^2.41.0",
-		"@wordpress/hooks": "^3.41.0",
-		"@wordpress/html-entities": "^3.41.0",
-		"@wordpress/i18n": "^4.41.0",
-		"@wordpress/icons": "^9.32.0",
-		"@wordpress/interactivity": "^2.2.0",
-		"@wordpress/keycodes": "^3.41.0",
-		"@wordpress/notices": "^4.9.0",
-		"@wordpress/primitives": "^3.39.0",
-		"@wordpress/private-apis": "^0.23.0",
-		"@wordpress/reusable-blocks": "^4.18.0",
-		"@wordpress/rich-text": "^6.18.0",
-		"@wordpress/server-side-render": "^4.18.0",
-		"@wordpress/url": "^3.42.0",
-		"@wordpress/viewport": "^5.18.0",
-		"@wordpress/wordcount": "^3.41.0",
+		"@wordpress/a11y": "^3.42.0",
+		"@wordpress/api-fetch": "^6.39.0",
+		"@wordpress/autop": "^3.42.0",
+		"@wordpress/blob": "^3.42.0",
+		"@wordpress/block-editor": "^12.10.0",
+		"@wordpress/blocks": "^12.19.0",
+		"@wordpress/components": "^25.8.0",
+		"@wordpress/compose": "^6.19.0",
+		"@wordpress/core-data": "^6.19.0",
+		"@wordpress/data": "^9.12.0",
+		"@wordpress/date": "^4.42.0",
+		"@wordpress/deprecated": "^3.42.0",
+		"@wordpress/dom": "^3.42.0",
+		"@wordpress/element": "^5.19.0",
+		"@wordpress/escape-html": "^2.42.0",
+		"@wordpress/hooks": "^3.42.0",
+		"@wordpress/html-entities": "^3.42.0",
+		"@wordpress/i18n": "^4.42.0",
+		"@wordpress/icons": "^9.33.0",
+		"@wordpress/interactivity": "^2.3.0",
+		"@wordpress/keycodes": "^3.42.0",
+		"@wordpress/notices": "^4.10.0",
+		"@wordpress/primitives": "^3.40.0",
+		"@wordpress/private-apis": "^0.24.0",
+		"@wordpress/reusable-blocks": "^4.19.0",
+		"@wordpress/rich-text": "^6.19.0",
+		"@wordpress/server-side-render": "^4.19.0",
+		"@wordpress/url": "^3.43.0",
+		"@wordpress/viewport": "^5.19.0",
+		"@wordpress/wordcount": "^3.42.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -68,7 +68,6 @@
 		"fast-average-color": "^9.1.1",
 		"fast-deep-equal": "^3.1.3",
 		"memize": "^2.1.0",
-		"micromodal": "^0.4.10",
 		"remove-accents": "^0.5.0",
 		"uuid": "^8.3.0"
 	},
@@ -79,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5eac1734bcdca2301fdd37ec8cfe2a45e722a2c4"
+	"gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
 }

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>
 	);