@wordpress/block-library 6.0.20 → 6.1.0

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;
@@ -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 -->
@@ -74,11 +74,7 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const {
-			getByA11yLabel,
-			getByTestId,
-			getByText,
-		} = await initializeEditor( {
+		const { getByA11yLabel, getByTestId, getByText } = initializeEditor( {
 			initialHtml: '',
 			capabilities: { reusableBlock: true },
 		} );
@@ -87,7 +83,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: {
@@ -127,7 +123,7 @@ describe( 'Reusable block', () => {
 		const id = 3;
 		const initialHtml = `<!-- wp:block {"ref":${ id }} /-->`;
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByA11yLabel } = initializeEditor( {
 			initialHtml,
 		} );
 
@@ -145,7 +141,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 }} /-->`;
@@ -160,7 +158,7 @@ describe( 'Reusable block', () => {
 			return Promise.resolve( response );
 		} );
 
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByA11yLabel } = initializeEditor( {
 			initialHtml,
 		} );
 

package/src/button/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/button",
 	"title": "Button",
@@ -78,7 +79,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.

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Buttons block justify content sets Justify items center option 1`] = `
+"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"center\\"}} -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block justify content sets Justify items left option 1`] = `
+"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"left\\"}} -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block justify content sets Justify items right option 1`] = `
+"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"right\\"}} -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+<!-- /wp:buttons -->"
+`;
+
+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>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;

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

@@ -27,59 +27,89 @@ afterAll( () => {
 	} );
 } );
 
-describe( 'when a button is shown', () => {
-	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>
-		<!-- /wp:button --></div>
-		<!-- /wp:buttons -->`;
-		const { getByA11yLabel } = await initializeEditor( {
-			initialHtml,
-		} );
+describe( 'Buttons block', () => {
+	describe( 'when a button is shown', () => {
+		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>
+			<!-- /wp:button --></div>
+			<!-- /wp:buttons -->`;
+			const { getByA11yLabel } = initializeEditor( {
+				initialHtml,
+			} );
 
-		const buttonsBlock = await waitFor( () =>
-			getByA11yLabel( /Buttons Block\. Row 1/ )
-		);
-		fireEvent.press( buttonsBlock );
+			const buttonsBlock = await waitFor( () =>
+				getByA11yLabel( /Buttons Block\. Row 1/ )
+			);
+			fireEvent.press( buttonsBlock );
 
-		// onLayout event has to be explicitly dispatched in BlockList component,
-		// otherwise the inner blocks are not rendered.
-		const innerBlockListWrapper = await waitFor( () =>
-			within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-		);
-		fireEvent( innerBlockListWrapper, 'layout', {
-			nativeEvent: {
-				layout: {
-					width: 100,
+			// onLayout event has to be explicitly dispatched in BlockList component,
+			// otherwise the inner blocks are not rendered.
+			const innerBlockListWrapper = await waitFor( () =>
+				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
+			);
+			fireEvent( innerBlockListWrapper, 'layout', {
+				nativeEvent: {
+					layout: {
+						width: 100,
+					},
 				},
-			},
+			} );
+
+			const buttonInnerBlock = await waitFor( () =>
+				within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ )
+			);
+			fireEvent.press( buttonInnerBlock );
+
+			const settingsButton = await waitFor( () =>
+				getByA11yLabel( 'Open Settings' )
+			);
+			fireEvent.press( settingsButton );
+
+			const radiusStepper = await waitFor( () =>
+				getByA11yLabel( /Border Radius/ )
+			);
+
+			const incrementButton = await waitFor( () =>
+				within( radiusStepper ).getByTestId( 'Increment' )
+			);
+			fireEvent( incrementButton, 'onPressIn' );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
+	} );
 
-		const buttonInnerBlock = await waitFor( () =>
-			within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ )
-		);
-		fireEvent.press( buttonInnerBlock );
+	describe( 'justify content', () => {
+		[
+			'Justify items left',
+			'Justify items center',
+			'Justify items right',
+		].forEach( ( justificationOption ) =>
+			it( `sets ${ justificationOption } option`, async () => {
+				const initialHtml = `<!-- wp:buttons -->
+				<div class="wp-block-buttons"><!-- wp:button /--></div>
+				<!-- /wp:buttons -->`;
+				const { getByA11yLabel, getByText } = initializeEditor( {
+					initialHtml,
+				} );
 
-		const settingsButton = await waitFor( () =>
-			getByA11yLabel( 'Open Settings' )
-		);
-		fireEvent.press( settingsButton );
+				const block = await waitFor( () =>
+					getByA11yLabel( /Buttons Block\. Row 1/ )
+				);
+				fireEvent.press( block );
 
-		const radiusStepper = await waitFor( () =>
-			getByA11yLabel( /Border Radius/ )
-		);
+				fireEvent.press(
+					getByA11yLabel( 'Change items justification' )
+				);
+
+				// Select alignment option
+				fireEvent.press(
+					await waitFor( () => getByText( justificationOption ) )
+				);
 
-		const incrementButton = await waitFor( () =>
-			within( radiusStepper ).getByTestId( 'Increment' )
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
 		);
-		fireEvent( incrementButton, 'onPressIn' );
-
-		const expectedHtml = `<!-- 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>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->`;
-		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
 } );

package/src/calendar/block.json

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