@wordpress/block-library 6.0.23 → 7.0.0

package/build-style/table/style-rtl.css

@@ -154,4 +154,5 @@
 .wp-block-table table[style*=border-width] th,
 .wp-block-table table[style*=border-width] td {
   border-width: inherit;
+  border-style: inherit;
 }

package/build-style/table/style.css

@@ -154,4 +154,5 @@
 .wp-block-table table[style*=border-width] th,
 .wp-block-table table[style*=border-width] td {
   border-width: inherit;
+  border-style: inherit;
 }

package/build-style/tag-cloud/style-rtl.css

@@ -89,4 +89,12 @@
   display: inline-block;
   margin-right: 5px;
   text-decoration: none;
+}
+.wp-block-tag-cloud.is-style-outline a {
+  border: 1px solid currentColor;
+  font-size: unset !important;
+  margin-bottom: 1ch;
+  margin-left: 1ch;
+  padding: 1ch 2ch;
+  text-decoration: none !important;
 }

package/build-style/tag-cloud/style.css

@@ -89,4 +89,12 @@
   display: inline-block;
   margin-left: 5px;
   text-decoration: none;
+}
+.wp-block-tag-cloud.is-style-outline a {
+  border: 1px solid currentColor;
+  font-size: unset !important;
+  margin-bottom: 1ch;
+  margin-right: 1ch;
+  padding: 1ch 2ch;
+  text-decoration: none !important;
 }

package/build-style/theme-rtl.css

@@ -83,12 +83,14 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
+.wp-block-code {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
 .wp-block-code > code {
   font-family: Menlo, Consolas, monaco, monospace;
-  color: #1e1e1e;
   padding: 0.8em 1em;
-  border: 1px solid #ddd;
-  border-radius: 4px;
 }
 
 .wp-block-embed figcaption {
@@ -162,7 +164,7 @@
   font-weight: bold;
 }
 
-.wp-block-group:where(.has-background) {
+:where(.wp-block-group.has-background) {
   padding: 1.25em 2.375em;
 }
 

package/build-style/theme.css

@@ -83,12 +83,14 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
+.wp-block-code {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
 .wp-block-code > code {
   font-family: Menlo, Consolas, monaco, monospace;
-  color: #1e1e1e;
   padding: 0.8em 1em;
-  border: 1px solid #ddd;
-  border-radius: 4px;
 }
 
 .wp-block-embed figcaption {
@@ -162,7 +164,7 @@
   font-weight: bold;
 }
 
-.wp-block-group:where(.has-background) {
+:where(.wp-block-group.has-background) {
   padding: 1.25em 2.375em;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "6.0.23",
+	"version": "7.0.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -33,34 +33,32 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.2.4",
-		"@wordpress/api-fetch": "^5.2.6",
-		"@wordpress/autop": "^3.2.3",
-		"@wordpress/blob": "^3.2.2",
-		"@wordpress/block-editor": "^8.0.15",
-		"@wordpress/blocks": "^11.1.5",
-		"@wordpress/components": "^19.2.2",
-		"@wordpress/compose": "^5.0.7",
-		"@wordpress/core-data": "^4.0.9",
-		"@wordpress/data": "^6.1.5",
-		"@wordpress/date": "^4.2.3",
-		"@wordpress/deprecated": "^3.2.3",
-		"@wordpress/dom": "^3.2.7",
-		"@wordpress/element": "^4.0.4",
-		"@wordpress/escape-html": "^2.2.3",
-		"@wordpress/hooks": "^3.2.2",
-		"@wordpress/html-entities": "^3.2.3",
-		"@wordpress/i18n": "^4.2.4",
-		"@wordpress/icons": "^6.1.1",
-		"@wordpress/is-shallow-equal": "^4.2.1",
-		"@wordpress/keycodes": "^3.2.4",
-		"@wordpress/notices": "^3.2.8",
-		"@wordpress/primitives": "^3.0.4",
-		"@wordpress/reusable-blocks": "^3.0.21",
-		"@wordpress/rich-text": "^5.0.8",
-		"@wordpress/server-side-render": "^3.0.19",
-		"@wordpress/url": "^3.3.1",
-		"@wordpress/viewport": "^4.0.7",
+		"@wordpress/a11y": "^3.3.1",
+		"@wordpress/api-fetch": "^6.0.1",
+		"@wordpress/autop": "^3.3.1",
+		"@wordpress/blob": "^3.3.1",
+		"@wordpress/block-editor": "^8.1.1",
+		"@wordpress/blocks": "^11.2.1",
+		"@wordpress/components": "^19.4.0",
+		"@wordpress/compose": "^5.1.1",
+		"@wordpress/core-data": "^4.1.1",
+		"@wordpress/data": "^6.2.1",
+		"@wordpress/date": "^4.3.1",
+		"@wordpress/deprecated": "^3.3.1",
+		"@wordpress/dom": "^3.3.1",
+		"@wordpress/element": "^4.1.1",
+		"@wordpress/hooks": "^3.3.1",
+		"@wordpress/html-entities": "^3.3.1",
+		"@wordpress/i18n": "^4.3.1",
+		"@wordpress/icons": "^6.3.0",
+		"@wordpress/keycodes": "^3.3.1",
+		"@wordpress/notices": "^3.3.1",
+		"@wordpress/primitives": "^3.1.1",
+		"@wordpress/reusable-blocks": "^3.1.1",
+		"@wordpress/rich-text": "^5.1.1",
+		"@wordpress/server-side-render": "^3.1.1",
+		"@wordpress/url": "^3.4.1",
+		"@wordpress/viewport": "^4.1.1",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"fast-average-color": "4.3.0",
@@ -72,5 +70,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "0e4085301b13440717334d012c45399949163b4a"
+	"gitHead": "2e4922861e49f5a090f9dc52056165092cfba163"
 }

package/src/archives/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/archives",
 	"title": "Archives",

package/src/archives/index.php

@@ -23,7 +23,7 @@ function render_block_core_archives( $attributes ) {
 
 		$class .= ' wp-block-archives-dropdown';
 
-		$dropdown_id = esc_attr( uniqid( 'wp-block-archives-' ) );
+		$dropdown_id = uniqid( 'wp-block-archives-' );
 		$title       = __( 'Archives' );
 
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-archives.php */
@@ -62,11 +62,9 @@ function render_block_core_archives( $attributes ) {
 				break;
 		}
 
-		$label = esc_html( $label );
-
-		$block_content = '<label for="' . $dropdown_id . '">' . $title . '</label>
-	<select id="' . $dropdown_id . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
-	<option value="">' . $label . '</option>' . $archives . '</select>';
+		$block_content = '<label for="' . esc_attr( $dropdown_id ) . '">' . esc_html( $title ) . '</label>
+	<select id="' . esc_attr( $dropdown_id ) . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
+	<option value="">' . esc_html( $label ) . '</option>' . $archives . '</select>';
 
 		return sprintf(
 			'<div %1$s>%2$s</div>',
@@ -90,9 +88,7 @@ function render_block_core_archives( $attributes ) {
 
 	$archives = wp_get_archives( $archives_args );
 
-	$classnames = esc_attr( $class );
-
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classnames ) );
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $class ) );
 
 	if ( empty( $archives ) ) {
 		return sprintf(

package/src/audio/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/audio",
 	"title": "Audio",

package/src/audio/edit.js

@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -6,6 +11,7 @@ import {
 	Disabled,
 	PanelBody,
 	SelectControl,
+	Spinner,
 	ToggleControl,
 	withNotices,
 } from '@wordpress/components';
@@ -34,6 +40,7 @@ const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
 function AudioEdit( {
 	attributes,
+	className,
 	noticeOperations,
 	setAttributes,
 	onReplace,
@@ -42,7 +49,7 @@ function AudioEdit( {
 	insertBlocksAfter,
 } ) {
 	const { id, autoplay, caption, loop, preload, src } = attributes;
-	const blockProps = useBlockProps();
+	const isTemporaryAudio = ! id && isBlobURL( src );
 	const mediaUpload = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings().mediaUpload;
@@ -82,7 +89,7 @@ function AudioEdit( {
 			const embedBlock = createUpgradedEmbedBlock( {
 				attributes: { url: newSrc },
 			} );
-			if ( undefined !== embedBlock ) {
+			if ( undefined !== embedBlock && onReplace ) {
 				onReplace( embedBlock );
 				return;
 			}
@@ -101,7 +108,6 @@ function AudioEdit( {
 			: null;
 	}
 
-	// const { setAttributes, isSelected, noticeUI } = this.props;
 	function onSelectAudio( media ) {
 		if ( ! media || ! media.url ) {
 			// in this case there was an error and we should continue in the editing state
@@ -113,6 +119,15 @@ function AudioEdit( {
 		// selected media, then switches off the editing UI
 		setAttributes( { src: media.url, id: media.id } );
 	}
+
+	const classes = classnames( className, {
+		'is-transient': isTemporaryAudio,
+	} );
+
+	const blockProps = useBlockProps( {
+		className: classes,
+	} );
+
 	if ( ! src ) {
 		return (
 			<div { ...blockProps }>
@@ -186,6 +201,7 @@ function AudioEdit( {
 				<Disabled isDisabled={ ! isSelected }>
 					<audio controls="controls" src={ src } />
 				</Disabled>
+				{ isTemporaryAudio && <Spinner /> }
 				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
 					<RichText
 						tagName="figcaption"

package/src/audio/editor.scss

@@ -2,4 +2,18 @@
 	// Remove the left and right margin the figure is born with.
 	margin-left: 0;
 	margin-right: 0;
+	position: relative;
+
+	&.is-transient audio {
+		opacity: 0.3;
+	}
+
+	// Shown while audio is being uploaded
+	.components-spinner {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		margin-top: -9px;
+		margin-left: -9px;
+	}
 }

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

@@ -2,6 +2,11 @@
 
 exports[`Audio block renders audio block error state without crashing 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
   accessible={true}
   focusable={true}
   onClick={[Function]}
@@ -31,6 +36,11 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
       }
     />
     <View
+      accessibilityState={
+        Object {
+          "disabled": true,
+        }
+      }
       accessible={true}
       focusable={true}
       onClick={[Function]}
@@ -134,6 +144,7 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "",
             }
           }
@@ -148,6 +159,11 @@ exports[`Audio block renders audio block error state without crashing 1`] = `
 
 exports[`Audio block renders audio file without crashing 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
   accessible={true}
   focusable={true}
   onClick={[Function]}
@@ -177,6 +193,11 @@ exports[`Audio block renders audio file without crashing 1`] = `
       }
     />
     <View
+      accessibilityState={
+        Object {
+          "disabled": true,
+        }
+      }
       accessible={true}
       focusable={true}
       onClick={[Function]}
@@ -303,6 +324,7 @@ exports[`Audio block renders audio file without crashing 1`] = `
               "eventCount": undefined,
               "linkTextColor": undefined,
               "selection": null,
+              "tag": "p",
               "text": "",
             }
           }

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

@@ -1,13 +1,17 @@
 /**
  * External dependencies
  */
-import { act, create } from 'react-test-renderer';
+import { render } from 'test/helpers';
 
 /**
  * WordPress dependencies
  */
-import { MediaUploadProgress, BlockEdit } from '@wordpress/block-editor';
+import { BlockEdit } from '@wordpress/block-editor';
 import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import {
+	subscribeMediaUpload,
+	sendMediaUpload,
+} from '@wordpress/react-native-bridge';
 
 /**
  * Internal dependencies
@@ -18,12 +22,22 @@ import { metadata, settings, name } from '../index';
 // snapshot testing where we want to keep the original component.
 jest.unmock( '@wordpress/react-native-aztec' );
 
+const MEDIA_UPLOAD_STATE_FAILED = 3;
+
+let uploadCallBack;
+subscribeMediaUpload.mockImplementation( ( callback ) => {
+	uploadCallBack = callback;
+} );
+sendMediaUpload.mockImplementation( ( payload ) => {
+	uploadCallBack( payload );
+} );
+
 const AudioEdit = ( { clientId, ...props } ) => (
 	<BlockEdit name={ name } clientId={ clientId || 0 } { ...props } />
 );
 
 const getTestComponentWithContent = ( attributes = {} ) => {
-	return create(
+	return render(
 		<AudioEdit attributes={ attributes } setAttributes={ jest.fn() } />
 	);
 };
@@ -57,18 +71,17 @@ describe( 'Audio block', () => {
 	} );
 
 	it( 'renders audio block error state without crashing', () => {
+		const MEDIA_ID = '1';
 		const component = getTestComponentWithContent( {
 			src: 'https://cldup.com/59IrU0WJtq.mp3',
-			id: '1',
+			id: MEDIA_ID,
 		} );
 
-		const mediaUpload = component.root.findByType( MediaUploadProgress );
-
-		act( () => {
-			mediaUpload.instance.finishMediaUploadWithFailure( {
-				mediaId: -1,
-			} );
-		} );
+		const payloadFail = {
+			state: MEDIA_UPLOAD_STATE_FAILED,
+			mediaId: MEDIA_ID,
+		};
+		sendMediaUpload( payloadFail );
 
 		const rendered = component.toJSON();
 		expect( rendered ).toMatchSnapshot();

package/src/block/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/block",
 	"title": "Reusable block",

package/src/block/index.php

@@ -42,9 +42,14 @@ function render_block_core_block( $attributes ) {
 
 	$seen_refs[ $attributes['ref'] ] = true;
 
-	$result = do_blocks( $reusable_block->post_content );
+	// Handle embeds for reusable blocks.
+	global $wp_embed;
+	$content = $wp_embed->run_shortcode( $reusable_block->post_content );
+	$content = $wp_embed->autoembed( $content );
+
+	$content = do_blocks( $content );
 	unset( $seen_refs[ $attributes['ref'] ] );
-	return $result;
+	return $content;
 }
 
 /**

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

@@ -26,15 +26,15 @@ const getMockedReusableBlock = ( id ) => ( {
     <!-- wp:heading -->
     <h2>First Reusable block</h2>
     <!-- /wp:heading -->
-    
+
     <!-- wp:paragraph -->
     <p><strong>Bold</strong> <em>Italic</em> <s>Striked</s> Superscript<sup>(1)</sup> Subscript<sub>(2)</sub> <a href="http://www.wordpress.org" target="_blank" rel="noreferrer noopener">Link</a></p>
     <!-- /wp:paragraph -->
-    
+
     !-- wp:heading {"level":4} -->
     <h4>List</h4>
     <!-- /wp:heading -->
-    
+
     <!-- wp:list -->
     <ul><li>First Item</li><li>Second Item</li><li>Third Item</li></ul>
     <!-- /wp:list -->
@@ -87,7 +87,7 @@ describe( 'Reusable block', () => {
 		fireEvent.press( await waitFor( () => getByA11yLabel( 'Add block' ) ) );
 
 		// Navigate to reusable tab
-		const reusableSegment = getByText( 'Reusable' );
+		const reusableSegment = await waitFor( () => getByText( 'Reusable' ) );
 		// onLayout event is required by Segment component
 		fireEvent( reusableSegment, 'layout', {
 			nativeEvent: {
@@ -145,7 +145,9 @@ describe( 'Reusable block', () => {
 		expect( blockDeleted ).toBeDefined();
 	} );
 
-	it( 'renders block content', async () => {
+	// Skipped until `pointerEvents: 'none'` no longer erroneously prevents
+	// triggering `onLayout*` on the element: https://git.io/JSHZt
+	it.skip( 'renders block content', async () => {
 		// We have to use different ids because entities are cached in memory.
 		const id = 4;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;

package/src/button/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/button",
 	"title": "Button",
@@ -59,7 +60,11 @@
 		"alignWide": false,
 		"color": {
 			"__experimentalSkipSerialization": true,
-			"gradients": true
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"typography": {
 			"fontSize": true,
@@ -78,7 +83,10 @@
 		},
 		"__experimentalBorder": {
 			"radius": true,
-			"__experimentalSkipSerialization": true
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"radius": true
+			}
 		},
 		"__experimentalSelector": ".wp-block-button__link"
 	},

package/src/button/edit.native.js

@@ -171,7 +171,7 @@ function ButtonEdit( props ) {
 			label: __( 'Button Link URL' ),
 			placeholder: __( 'Add URL' ),
 			autoFocus: true,
-			autoFill: true,
+			autoFill: false,
 		},
 		openInNewTab: {
 			label: __( 'Open in new tab' ),

package/src/buttons/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/buttons",
 	"title": "Buttons",
@@ -12,7 +13,7 @@
 		"__experimentalExposeControlsToChildren": true,
 		"spacing": {
 			"blockGap": true,
-			"margin": ["top", "bottom" ],
+			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true
 			}

package/src/buttons/edit.js

@@ -15,6 +15,21 @@ import { name as buttonBlockName } from '../button';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
 
+const DEFAULT_BLOCK = {
+	name: buttonBlockName,
+	attributesToCopy: [
+		'backgroundColor',
+		'border',
+		'className',
+		'fontFamily',
+		'fontSize',
+		'gradient',
+		'style',
+		'textColor',
+		'width',
+	],
+};
+
 function ButtonsEdit( { attributes: { layout = {} } } ) {
 	const blockProps = useBlockProps();
 	const preferredStyle = useSelect( ( select ) => {
@@ -26,6 +41,8 @@ function ButtonsEdit( { attributes: { layout = {} } } ) {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
+		__experimentalDefaultBlock: DEFAULT_BLOCK,
+		__experimentalDirectInsert: true,
 		template: [
 			[
 				buttonBlockName,

package/src/buttons/edit.native.js

@@ -13,7 +13,7 @@ import {
 	JustifyContentControl,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, getBlockSupport } from '@wordpress/blocks';
 import { useResizeObserver } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
@@ -30,16 +30,23 @@ const ALLOWED_BLOCKS = [ buttonBlockName ];
 const layoutProp = { type: 'default', alignments: [] };
 
 export default function ButtonsEdit( {
-	attributes: { contentJustification, align },
+	attributes: { layout, align },
 	clientId,
 	isSelected,
 	setAttributes,
 	blockWidth,
+	name,
 } ) {
 	const [ resizeObserver, sizes ] = useResizeObserver();
 	const [ maxWidth, setMaxWidth ] = useState( 0 );
 	const { marginLeft: spacing } = styles.spacing;
 
+	// Extract attributes from block layout
+	const layoutBlockSupport = getBlockSupport( name, '__experimentalLayout' );
+	const defaultBlockLayout = layoutBlockSupport?.default;
+	const usedLayout = layout || defaultBlockLayout || {};
+	const { justifyContent } = usedLayout;
+
 	const { isInnerButtonSelected, shouldDelete } = useSelect(
 		( select ) => {
 			const {
@@ -126,9 +133,14 @@ export default function ButtonsEdit( {
 				<BlockControls group="block">
 					<JustifyContentControl
 						allowedControls={ justifyControls }
-						value={ contentJustification }
+						value={ justifyContent }
 						onChange={ ( value ) =>
-							setAttributes( { contentJustification: value } )
+							setAttributes( {
+								layout: {
+									...usedLayout,
+									justifyContent: value,
+								},
+							} )
 						}
 						popoverProps={ {
 							position: 'bottom right',
@@ -154,7 +166,7 @@ export default function ButtonsEdit( {
 					shouldRenderFooterAppender && renderFooterAppender.current
 				}
 				orientation="horizontal"
-				horizontalAlignment={ contentJustification }
+				horizontalAlignment={ justifyContent }
 				onDeleteBlock={ shouldDelete ? remove : undefined }
 				onAddBlock={ onAddNextButton }
 				parentWidth={ maxWidth } // This value controls the width of that the buttons are able to expand to.