@wordpress/block-library 8.12.0 → 8.12.2

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

package/src/footnotes/format.js

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import { v4 as createId } from 'uuid';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { formatListNumbered as icon } from '@wordpress/icons';
+import { insertObject } from '@wordpress/rich-text';
+import {
+	RichTextToolbarButton,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { name } from './block.json';
+
+export const formatName = 'core/footnote';
+export const format = {
+	title: __( 'Footnote' ),
+	tagName: 'a',
+	className: 'fn',
+	attributes: {
+		id: 'id',
+		href: 'href',
+		'data-fn': 'data-fn',
+	},
+	contentEditable: false,
+	edit: function Edit( { value, onChange, isObjectActive } ) {
+		const registry = useRegistry();
+		const {
+			getSelectedBlockClientId,
+			getBlockRootClientId,
+			getBlockName,
+			getBlocks,
+		} = useSelect( blockEditorStore );
+		const { selectionChange, insertBlock } =
+			useDispatch( blockEditorStore );
+		function onClick() {
+			registry.batch( () => {
+				const id = createId();
+				const newValue = insertObject(
+					value,
+					{
+						type: formatName,
+						attributes: {
+							href: '#' + id,
+							id: `${ id }-link`,
+							'data-fn': id,
+						},
+						innerHTML: '*',
+					},
+					value.end,
+					value.end
+				);
+				newValue.start = newValue.end - 1;
+
+				onChange( newValue );
+
+				// BFS search to find the first footnote block.
+				let fnBlock = null;
+				{
+					const queue = [ ...getBlocks() ];
+					while ( queue.length ) {
+						const block = queue.shift();
+						if ( block.name === name ) {
+							fnBlock = block;
+							break;
+						}
+						queue.push( ...block.innerBlocks );
+					}
+				}
+
+				// Maybe this should all also be moved to the entity provider.
+				// When there is no footnotes block in the post, create one and
+				// insert it at the bottom.
+				if ( ! fnBlock ) {
+					const clientId = getSelectedBlockClientId();
+					let rootClientId = getBlockRootClientId( clientId );
+
+					while (
+						rootClientId &&
+						getBlockName( rootClientId ) !== 'core/post-content'
+					) {
+						rootClientId = getBlockRootClientId( rootClientId );
+					}
+
+					fnBlock = createBlock( name );
+
+					insertBlock( fnBlock, undefined, rootClientId );
+				}
+
+				selectionChange( fnBlock.clientId, id, 0, 0 );
+			} );
+		}
+
+		return (
+			<RichTextToolbarButton
+				icon={ icon }
+				title={ __( 'Footnote' ) }
+				onClick={ onClick }
+				isActive={ isObjectActive }
+			/>
+		);
+	},
+};

package/src/footnotes/index.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { formatListNumbered as icon } from '@wordpress/icons';
+import { registerFormatType } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import edit from './edit';
+import metadata from './block.json';
+import { formatName, format } from './format';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};
+
+// Would be good to remove the format and HoR if the block is unregistered.
+registerFormatType( formatName, format );
+
+export const init = () => {
+	initBlock( { name, metadata, settings } );
+};

package/src/footnotes/index.php

@@ -0,0 +1,78 @@
+<?php
+/**
+ * Server-side rendering of the `core/footnotes` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/footnotes` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the HTML representing the footnotes.
+ */
+function render_block_core_footnotes( $attributes, $content, $block ) {
+	// Bail out early if the post ID is not set for some reason.
+	if ( empty( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	if ( post_password_required( $block->context['postId'] ) ) {
+		return;
+	}
+
+	$footnotes = get_post_meta( $block->context['postId'], 'footnotes', true );
+
+	if ( ! $footnotes ) {
+		return;
+	}
+
+	$footnotes = json_decode( $footnotes, true );
+
+	if ( count( $footnotes ) === 0 ) {
+		return '';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+
+	$block_content = '';
+
+	foreach ( $footnotes as $footnote ) {
+		$block_content .= sprintf(
+			'<li id="%1$s">%2$s <a href="#%1$s-link">↩︎</a></li>',
+			$footnote['id'],
+			$footnote['content']
+		);
+	}
+
+	return sprintf(
+		'<ol %1$s>%2$s</ol>',
+		$wrapper_attributes,
+		$block_content
+	);
+}
+
+/**
+ * Registers the `core/footnotes` block on the server.
+ */
+function register_block_core_footnotes() {
+	register_post_meta(
+		'post',
+		'footnotes',
+		array(
+			'show_in_rest' => true,
+			'single'       => true,
+			'type'         => 'string',
+		)
+	);
+	register_block_type_from_metadata(
+		__DIR__ . '/footnotes',
+		array(
+			'render_callback' => 'render_block_core_footnotes',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_footnotes' );

package/src/footnotes/style.scss

@@ -0,0 +1,18 @@
+.editor-styles-wrapper,
+.entry-content {
+	counter-reset: footnotes;
+}
+
+.fn {
+	vertical-align: super;
+	font-size: smaller;
+	counter-increment: footnotes;
+	display: inline-block;
+	text-indent: -9999999px;
+}
+
+.fn::after {
+	content: "[" counter(footnotes) "]";
+	text-indent: 0;
+	float: left;
+}

package/src/gallery/block.json

@@ -123,7 +123,7 @@
 			"background": true,
 			"gradients": true
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowEditing": false,

package/src/gallery/edit.js

@@ -144,7 +144,10 @@ function GalleryEdit( props ) {
 
 	const innerBlockImages = useSelect(
 		( select ) => {
-			return select( blockEditorStore ).getBlock( clientId )?.innerBlocks;
+			const innerBlocks =
+				select( blockEditorStore ).getBlock( clientId )?.innerBlocks ??
+				[];
+			return innerBlocks;
 		},
 		[ clientId ]
 	);

package/src/gallery/gallery.native.js

@@ -66,7 +66,7 @@ export const Gallery = ( props ) => {
 			numColumns: displayedColumns,
 			marginHorizontal: TILE_SPACING,
 			marginVertical: TILE_SPACING,
-			__experimentalLayout: { type: 'default', alignments: [] },
+			layout: { type: 'default', alignments: [] },
 			gridProperties: {
 				numColumns: displayedColumns,
 			},

package/src/gallery/test/__snapshots__/index.native.js.snap

@@ -110,6 +110,12 @@ exports[`Gallery block rearranges gallery items 1`] = `
 <!-- /wp:gallery -->"
 `;
 
+exports[`Gallery block renders gallery block placeholder correctly if the block doesn't have inner blocks 1`] = `
+"<!-- wp:gallery {"linkTo":"none"} -->
+<figure class="wp-block-gallery has-nested-images columns-default is-cropped"></figure>
+<!-- /wp:gallery -->"
+`;
+
 exports[`Gallery block sets caption to gallery 1`] = `
 "<!-- wp:gallery {"linkTo":"none"} -->
 <figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":2000} -->