@wordpress/block-library 8.12.0 → 8.12.1

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

@@ -7,7 +7,7 @@ import {
 	initializeEditor,
 	render,
 	fireEvent,
-	waitFor,
+	waitForModalVisible,
 	within,
 	getBlock,
 	openBlockSettings,
@@ -185,14 +185,14 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'toggles a fixed background', async () => {
-		const { getByText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const fixedBackgroundButton = await waitFor( () =>
-			getByText( 'Fixed background' )
+		const fixedBackgroundButton = await screen.findByText(
+			'Fixed background'
 		);
 		fireEvent.press( fixedBackgroundButton );
 
@@ -215,7 +215,7 @@ describe( 'when an image is attached', () => {
 		);
 		fireEvent.press( editFocalPointButton );
 		fireEvent(
-			screen.getByTestId( 'Slider Y-Axis Position' ),
+			screen.getByTestId( 'Slider Y-Axis Position', { hidden: true } ),
 			'valueChange',
 			'52'
 		);
@@ -240,10 +240,12 @@ describe( 'when an image is attached', () => {
 		);
 		fireEvent.press( editFocalPointButton );
 		fireEvent.press(
-			screen.getByText( ( attributes.focalPoint.x * 100 ).toString() )
+			screen.getByText( ( attributes.focalPoint.x * 100 ).toString(), {
+				hidden: true,
+			} )
 		);
 		fireEvent.changeText(
-			screen.getByLabelText( 'X-Axis Position' ),
+			screen.getByLabelText( 'X-Axis Position', { hidden: true } ),
 			'99'
 		);
 		fireEvent.press( screen.getByLabelText( 'Apply' ) );
@@ -256,21 +258,26 @@ describe( 'when an image is attached', () => {
 	} );
 
 	it( 'discards canceled focal point changes', async () => {
-		const { getByText, getByLabelText } = render(
+		const screen = render(
 			<CoverEdit
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 			/>
 		);
-		const editFocalPointButton = await waitFor( () =>
-			getByText( 'Edit focal point' )
+		const editFocalPointButton = await screen.findByText(
+			'Edit focal point'
 		);
 		fireEvent.press( editFocalPointButton );
 		fireEvent.press(
-			getByText( ( attributes.focalPoint.x * 100 ).toString() )
+			screen.getByText( ( attributes.focalPoint.x * 100 ).toString(), {
+				hidden: true,
+			} )
 		);
-		fireEvent.changeText( getByLabelText( 'X-Axis Position' ), '80' );
-		fireEvent.press( getByLabelText( 'Go back' ) );
+		fireEvent.changeText(
+			screen.getByLabelText( 'X-Axis Position', { hidden: true } ),
+			'80'
+		);
+		fireEvent.press( screen.getByLabelText( 'Go back' ) );
 
 		expect( setAttributes ).not.toHaveBeenCalledWith(
 			expect.objectContaining( {
@@ -314,9 +321,13 @@ describe( 'when an image is attached', () => {
 
 		// Update Opacity attribute
 		const opacityControl = getByLabelText( /Opacity/ );
-		fireEvent.press( within( opacityControl ).getByText( '50' ) );
-		const heightTextInput =
-			within( opacityControl ).getByDisplayValue( '50' );
+		fireEvent.press(
+			within( opacityControl ).getByText( '50', { hidden: true } )
+		);
+		const heightTextInput = within( opacityControl ).getByDisplayValue(
+			'50',
+			{ hidden: true }
+		);
 		fireEvent.changeText( heightTextInput, '20' );
 
 		// The decreasing button should be disabled
@@ -356,7 +367,7 @@ describe( 'color settings', () => {
 
 		// Wait for Block Settings to be visible.
 		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
 		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
@@ -391,7 +402,7 @@ describe( 'color settings', () => {
 
 		// Wait for Block Settings to be visible.
 		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
 		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
@@ -447,7 +458,7 @@ describe( 'color settings', () => {
 
 		// Wait for Block Settings to be visible.
 		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
 		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
@@ -503,7 +514,7 @@ describe( 'color settings', () => {
 
 		// Wait for Block Settings to be visible.
 		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
-		await waitFor( () => blockSettingsModal.props.isVisible );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Open the overlay color settings.
 		const colorOverlay = await screen.findByLabelText( 'Color. Empty' );
@@ -536,12 +547,12 @@ describe( 'minimum height settings', () => {
 		await openBlockSettings( screen );
 
 		// Set vw unit
-		fireEvent.press( getByText( 'px' ) );
-		fireEvent.press( getByText( 'Viewport width (vw)' ) );
+		fireEvent.press( getByText( 'px', { hidden: true } ) );
+		fireEvent.press( getByText( 'Viewport width (vw)', { hidden: true } ) );
 
 		// Update height attribute
-		fireEvent.press( getByText( '300' ) );
-		const heightTextInput = getByDisplayValue( '300' );
+		fireEvent.press( getByText( '300', { hidden: true } ) );
+		const heightTextInput = getByDisplayValue( '300', { hidden: true } );
 		fireEvent.changeText( heightTextInput, '20' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -561,8 +572,8 @@ describe( 'minimum height settings', () => {
 		await openBlockSettings( screen );
 
 		// Set the pixel unit
-		fireEvent.press( getByText( 'vw' ) );
-		fireEvent.press( getByText( 'Pixels (px)' ) );
+		fireEvent.press( getByText( 'vw', { hidden: true } ) );
+		fireEvent.press( getByText( 'Pixels (px)', { hidden: true } ) );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
@@ -592,14 +603,17 @@ describe( 'minimum height settings', () => {
 				await openBlockSettings( screen );
 
 				// Set the unit name
-				fireEvent.press( getByText( 'vw' ) );
-				fireEvent.press( getByText( unitName ) );
+				fireEvent.press( getByText( 'vw', { hidden: true } ) );
+				fireEvent.press( getByText( unitName, { hidden: true } ) );
 
 				// Update height attribute
 				const heightControl = getByLabelText( /Minimum height/ );
-				fireEvent.press( within( heightControl ).getByText( value ) );
-				const heightTextInput =
-					within( heightControl ).getByDisplayValue( value );
+				fireEvent.press(
+					within( heightControl ).getByText( value, { hidden: true } )
+				);
+				const heightTextInput = within(
+					heightControl
+				).getByDisplayValue( value, { hidden: true } );
 				fireEvent.changeText( heightTextInput, minValue );
 
 				// The decreasing button should be disabled

package/src/cover/transforms.js

@@ -8,7 +8,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from './shared';
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 

package/src/details/block.json

@@ -5,7 +5,7 @@
 	"title": "Details",
 	"category": "text",
 	"description": "Hide and show additional content.",
-	"keywords": [ "disclosure", "summary", "hide", "accordion" ],
+	"keywords": [ "disclosure", "summary", "hide" ],
 	"textdomain": "default",
 	"attributes": {
 		"showContent": {

package/src/details/edit.js

@@ -30,15 +30,18 @@ function DetailsEdit( { attributes, setAttributes, clientId } ) {
 	} );
 
 	// Check if either the block or the inner blocks are selected.
-	const hasSelection = useSelect( ( select ) => {
-		const { isBlockSelected, hasSelectedInnerBlock } =
-			select( blockEditorStore );
-		/* Sets deep to true to also find blocks inside the details content block. */
-		return (
-			hasSelectedInnerBlock( clientId, true ) ||
-			isBlockSelected( clientId )
-		);
-	}, [] );
+	const hasSelection = useSelect(
+		( select ) => {
+			const { isBlockSelected, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			/* Sets deep to true to also find blocks inside the details content block. */
+			return (
+				hasSelectedInnerBlock( clientId, true ) ||
+				isBlockSelected( clientId )
+			);
+		},
+		[ clientId ]
+	);
 
 	return (
 		<>

package/src/details/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/embed/test/index.native.js

@@ -6,6 +6,7 @@ import {
 	initializeEditor,
 	fireEvent,
 	waitFor,
+	waitForModalVisible,
 	within,
 } from 'test/helpers';
 import { Platform } from 'react-native';
@@ -238,7 +239,7 @@ describe( 'Embed block', () => {
 			const embedEditURLModal = editor.getByTestId(
 				'embed-edit-url-modal'
 			);
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			await waitForModalVisible( embedEditURLModal );
 
 			// Dismiss the edit URL modal.
 			fireEvent( embedEditURLModal, 'backdropPress' );
@@ -256,7 +257,7 @@ describe( 'Embed block', () => {
 			const embedEditURLModal = editor.getByTestId(
 				'embed-edit-url-modal'
 			);
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			await waitForModalVisible( embedEditURLModal );
 
 			// Set an URL.
 			const linkTextInput = editor.getByPlaceholderText( 'Add link' );
@@ -296,7 +297,7 @@ describe( 'Embed block', () => {
 			const embedEditURLModal = editor.getByTestId(
 				'embed-edit-url-modal'
 			);
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			await waitForModalVisible( embedEditURLModal );
 
 			// Get embed link with auto-pasted URL.
 			const autopastedLinkField = await editor.findByText( clipboardURL );
@@ -335,7 +336,7 @@ describe( 'Embed block', () => {
 			const embedEditURLModal = editor.getByTestId(
 				'embed-edit-url-modal'
 			);
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			await waitForModalVisible( embedEditURLModal );
 
 			// Dismiss the edit URL modal.
 			fireEvent( embedEditURLModal, 'backdropPress' );
@@ -356,7 +357,7 @@ describe( 'Embed block', () => {
 			const embedEditURLModal = editor.getByTestId(
 				'embed-edit-url-modal'
 			);
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			await waitForModalVisible( embedEditURLModal );
 
 			// Set an URL.
 			const linkTextInput = editor.getByPlaceholderText( 'Add link' );
@@ -397,7 +398,7 @@ describe( 'Embed block', () => {
 			const embedEditURLModal = editor.getByTestId(
 				'embed-edit-url-modal'
 			);
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			await waitForModalVisible( embedEditURLModal );
 
 			// Get embed link.
 			const embedLink = await editor.findByText( clipboardURL );
@@ -438,7 +439,7 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = editor.getByTestId(
 				'block-settings-modal'
 			);
-			await waitFor( () => blockSettingsModal.props.isVisible );
+			await waitForModalVisible( blockSettingsModal );
 
 			// Dismiss the Block Settings modal.
 			fireEvent( blockSettingsModal, 'backdropPress' );
@@ -462,7 +463,7 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = editor.getByTestId(
 				'block-settings-modal'
 			);
-			await waitFor( () => blockSettingsModal.props.isVisible );
+			await waitForModalVisible( blockSettingsModal );
 
 			// Start editing link.
 			fireEvent.press(
@@ -507,7 +508,7 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = editor.getByTestId(
 				'block-settings-modal'
 			);
-			await waitFor( () => blockSettingsModal.props.isVisible );
+			await waitForModalVisible( blockSettingsModal );
 
 			// Start editing link.
 			fireEvent.press(
@@ -581,7 +582,7 @@ describe( 'Embed block', () => {
 			const embedEditURLModal = editor.getByTestId(
 				'embed-edit-url-modal'
 			);
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			await waitForModalVisible( embedEditURLModal );
 
 			// Dismiss the edit URL modal.
 			fireEvent( embedEditURLModal, 'backdropPress' );
@@ -594,7 +595,7 @@ describe( 'Embed block', () => {
 			fireEvent.press( editor.getByText( 'ADD LINK' ) );
 
 			// Wait for edit URL modal to be visible.
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			await waitForModalVisible( embedEditURLModal );
 
 			// Dismiss the edit URL modal.
 			fireEvent( embedEditURLModal, 'backdropPress' );
@@ -604,11 +605,9 @@ describe( 'Embed block', () => {
 			fireEvent.press( editor.getByText( 'ADD LINK' ) );
 
 			// Wait for edit URL modal to be visible.
-			const isVisibleThirdTime = await waitFor(
-				() => embedEditURLModal.props.isVisible
-			);
+			await waitForModalVisible( embedEditURLModal );
 
-			expect( isVisibleThirdTime ).toBeTruthy();
+			expect( embedEditURLModal.props.isVisible ).toBe( true );
 		} );
 
 		// This test case covers the bug fixed in PR #35013.
@@ -622,7 +621,7 @@ describe( 'Embed block', () => {
 			const embedEditURLModal = editor.getByTestId(
 				'embed-edit-url-modal'
 			);
-			await waitFor( () => embedEditURLModal.props.isVisible );
+			await waitForModalVisible( embedEditURLModal );
 
 			// Set an bad URL.
 			let linkTextInput = editor.getByPlaceholderText( 'Add link' );
@@ -640,7 +639,7 @@ describe( 'Embed block', () => {
 			const blockSettingsModal = editor.getByTestId(
 				'block-settings-modal'
 			);
-			await waitFor( () => blockSettingsModal.props.isVisible );
+			await waitForModalVisible( blockSettingsModal );
 
 			// Start editing link.
 			fireEvent.press(
@@ -832,7 +831,7 @@ describe( 'Embed block', () => {
 
 			// Wait for no preview modal to be visible.
 			const noPreviewModal = getByTestId( 'embed-no-preview-modal' );
-			await waitFor( () => noPreviewModal.props.isVisible );
+			await waitForModalVisible( noPreviewModal );
 
 			// Preview post.
 			fireEvent.press( getByText( 'Preview post' ) );
@@ -854,13 +853,15 @@ describe( 'Embed block', () => {
 
 			// Wait for no preview modal to be visible.
 			const noPreviewModal = getByTestId( 'embed-no-preview-modal' );
-			await waitFor( () => noPreviewModal.props.isVisible );
+			await waitForModalVisible( noPreviewModal );
 
 			// Dismiss modal.
 			fireEvent.press( getByText( 'Dismiss' ) );
 
 			// Wait for no preview modal to be not visible.
-			await waitFor( () => ! noPreviewModal.props.isVisible );
+			await waitFor( () =>
+				expect( noPreviewModal.props.isVisible ).toBe( false )
+			);
 
 			expect( requestPreview ).not.toHaveBeenCalled();
 		} );
@@ -893,7 +894,7 @@ describe( 'Embed block', () => {
 			const embedHandlerPicker = editor.getByTestId(
 				'embed-handler-picker'
 			);
-			await waitFor( () => embedHandlerPicker.props.isVisible );
+			await waitForModalVisible( embedHandlerPicker );
 
 			// Select create embed option.
 			fireEvent.press( editor.getByText( 'Create embed' ) );
@@ -937,16 +938,14 @@ describe( 'Embed block', () => {
 			const embedHandlerPicker = editor.getByTestId(
 				'embed-handler-picker'
 			);
-			await waitFor( () => embedHandlerPicker.props.isVisible );
+			await waitForModalVisible( embedHandlerPicker );
 
 			// Select create link option.
 			fireEvent.press( editor.getByText( 'Create link' ) );
 
 			// Get the link text.
-			const linkText = await waitFor( () =>
-				editor.getByDisplayValue(
-					`<p><a href="${ expectedURL }">${ expectedURL }</a></p>`
-				)
+			const linkText = await editor.findByDisplayValue(
+				`<p><a href="${ expectedURL }">${ expectedURL }</a></p>`
 			);
 
 			expect( linkText ).toBeDefined();
@@ -1041,11 +1040,10 @@ describe( 'Embed block', () => {
 	it( 'sets block caption', async () => {
 		const expectedCaption = 'Caption';
 
-		const { getByPlaceholderText, getByDisplayValue } =
-			await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+		const screen = await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
 
 		// Set a caption.
-		const captionField = getByPlaceholderText( 'Add caption' );
+		const captionField = screen.getByPlaceholderText( 'Add caption' );
 		fireEvent( captionField, 'focus' );
 		fireEvent( captionField, 'onChange', {
 			nativeEvent: {
@@ -1056,8 +1054,8 @@ describe( 'Embed block', () => {
 		} );
 
 		// Get current caption.
-		const caption = await waitFor( () =>
-			getByDisplayValue( `<p>${ expectedCaption }</p>` )
+		const caption = await screen.findByDisplayValue(
+			`<p>${ expectedCaption }</p>`
 		);
 
 		expect( caption ).toBeDefined();
@@ -1086,36 +1084,32 @@ describe( 'Embed block', () => {
 
 	describe( 'block settings', () => {
 		it( 'toggles resize for smaller devices media settings', async () => {
-			const { getByLabelText, getByText } =
-				await initializeWithEmbedBlock( RICH_TEXT_EMBED_HTML );
+			const screen = await initializeWithEmbedBlock(
+				RICH_TEXT_EMBED_HTML
+			);
 
 			// Open Block Settings.
-			fireEvent.press(
-				await waitFor( () => getByLabelText( 'Open Settings' ) )
-			);
+			fireEvent.press( await screen.findByLabelText( 'Open Settings' ) );
 
 			// Untoggle resize for smaller devices.
 			fireEvent.press(
-				await waitFor( () => getByText( /Resize for smaller devices/ ) )
+				await screen.findByText( /Resize for smaller devices/ )
 			);
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
 		it( 'does not show media settings panel if responsive is not supported', async () => {
-			const { getByLabelText, getByText } =
-				await initializeWithEmbedBlock( WP_EMBED_HTML );
+			const screen = await initializeWithEmbedBlock( WP_EMBED_HTML );
 
 			// Open Block Settings.
-			fireEvent.press(
-				await waitFor( () => getByLabelText( 'Open Settings' ) )
-			);
+			fireEvent.press( await screen.findByLabelText( 'Open Settings' ) );
 
 			// Wait for media settings panel.
 			let mediaSettingsPanel;
 			try {
-				mediaSettingsPanel = await waitFor( () =>
-					getByText( 'Media settings' )
+				mediaSettingsPanel = await screen.findByText(
+					'Media settings'
 				);
 			} catch ( e ) {
 				// NOOP.

package/src/file/block.json

@@ -67,7 +67,7 @@
 			}
 		}
 	},
-	"viewScript": "file:./interactivity.min.js",
+	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-file-editor",
 	"style": "wp-block-file"
 }

package/src/file/index.php

@@ -5,6 +5,23 @@
  * @package WordPress
  */
 
+if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+	/**
+	 * Replaces view script for the File block with version using Interactivity API.
+	 *
+	 * @param array $metadata Block metadata as read in via block.json.
+	 *
+	 * @return array Filtered block type metadata.
+	 */
+	function gutenberg_block_core_file_update_interactive_view_script( $metadata ) {
+		if ( 'core/file' === $metadata['name'] ) {
+			$metadata['viewScript'] = array( 'file:./interactivity.min.js' );
+		}
+		return $metadata;
+	}
+	add_filter( 'block_type_metadata', 'gutenberg_block_core_file_update_interactive_view_script', 10, 1 );
+}
+
 /**
  * When the `core/file` block is rendering, check if we need to enqueue the `'wp-block-file-view` script.
  *
@@ -54,7 +71,7 @@ function render_block_core_file( $attributes, $content, $block ) {
 	);
 
 	// If it uses the Interactivity API, add the directives.
-	if ( $should_load_view_script ) {
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN && $should_load_view_script ) {
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
 		$processor->set_attribute( 'data-wp-interactive', '' );

package/src/file/view.js

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { hidePdfEmbedsOnUnsupportedBrowsers } from './utils';
+
+document.addEventListener(
+	'DOMContentLoaded',
+	hidePdfEmbedsOnUnsupportedBrowsers
+);

package/src/footnotes/block.json

@@ -0,0 +1,18 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/footnotes",
+	"title": "Footnotes",
+	"category": "text",
+	"description": "",
+	"keywords": [ "references" ],
+	"textdomain": "default",
+	"usesContext": [ "postId", "postType" ],
+	"supports": {
+		"html": false,
+		"multiple": false,
+		"inserter": false,
+		"reusable": false
+	},
+	"style": "wp-block-footnotes"
+}

package/src/footnotes/edit.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { useEntityProp } from '@wordpress/core-data';
+
+export default function FootnotesEdit( { context: { postType, postId } } ) {
+	const [ meta, updateMeta ] = useEntityProp(
+		'postType',
+		postType,
+		'meta',
+		postId
+	);
+	const footnotes = meta?.footnotes ? JSON.parse( meta.footnotes ) : [];
+	return (
+		<ol { ...useBlockProps() }>
+			{ footnotes.map( ( { id, content } ) => (
+				<li key={ id }>
+					<RichText
+						id={ id }
+						tagName="span"
+						value={ content }
+						identifier={ id }
+						// To do: figure out why the browser is not scrolling
+						// into view when it receives focus.
+						onFocus={ ( event ) => {
+							if ( ! event.target.textContent.trim() ) {
+								event.target.scrollIntoView();
+							}
+						} }
+						onChange={ ( nextFootnote ) => {
+							updateMeta( {
+								...meta,
+								footnotes: JSON.stringify(
+									footnotes.map( ( footnote ) => {
+										return footnote.id === id
+											? {
+													content: nextFootnote,
+													id,
+											  }
+											: footnote;
+									} )
+								),
+							} );
+						} }
+					/>{ ' ' }
+					<a href={ `#${ id }-link` }>↩︎</a>
+				</li>
+			) ) }
+		</ol>
+	);
+}