@wordpress/block-library 8.11.0 → 8.12.1

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/freeform/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/freeform",
 	"title": "Classic",
 	"category": "text",
@@ -9,7 +9,7 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "html"
+			"source": "raw"
 		}
 	},
 	"supports": {

package/src/gallery/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/gallery",
 	"title": "Gallery",
 	"category": "media",
@@ -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} -->

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

@@ -27,6 +27,8 @@ import {
 	requestImageFailedRetryDialog,
 	requestImageUploadCancelDialog,
 } from '@wordpress/react-native-bridge';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { select } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -75,6 +77,24 @@ describe( 'Gallery block', () => {
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
+	it( "renders gallery block placeholder correctly if the block doesn't have inner blocks", async () => {
+		const getBlockSpy = jest
+			.spyOn( select( blockEditorStore ), 'getBlock' )
+			.mockReturnValue( {
+				innerBlocks: undefined,
+				attributes: {
+					content: '',
+				},
+			} );
+
+		const screen = await addGalleryBlock();
+
+		expect( getBlock( screen, 'Gallery' ) ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+
+		getBlockSpy.mockReset();
+	} );
+
 	it( 'selects a gallery item', async () => {
 		const { galleryBlock } = await initializeWithGalleryBlock( {
 			numberOfItems: 1,
@@ -209,7 +229,9 @@ describe( 'Gallery block', () => {
 		} );
 
 		// Check gallery item caption is not visible
-		const galleryItemCaption = getByLabelText( /Image caption. Empty/ );
+		const galleryItemCaption = getByLabelText( /Image caption. Empty/, {
+			hidden: true,
+		} );
 		expect( galleryItemCaption ).not.toBeVisible();
 
 		// Set gallery caption

package/src/gallery/v1/save.js

@@ -70,7 +70,7 @@ export default function saveV1( { attributes } ) {
 									<RichText.Content
 										tagName="figcaption"
 										className={ classnames(
-											'blocks-gallery-item',
+											'blocks-gallery-item__caption',
 											__experimentalGetElementClassName(
 												'caption'
 											)

package/src/group/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/group",
 	"title": "Group",
 	"category": "design",
@@ -75,7 +75,7 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": {
+		"layout": {
 			"allowSizingOnChildren": true
 		}
 	},

package/src/group/deprecated.js

@@ -101,7 +101,7 @@ const deprecated = [
 					fontSize: true,
 				},
 			},
-			__experimentalLayout: true,
+			layout: true,
 		},
 		save( { attributes: { tagName: Tag } } ) {
 			return (

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

@@ -8,7 +8,6 @@ import {
 	initializeEditor,
 	within,
 	getBlock,
-	waitFor,
 } from 'test/helpers';
 
 /**
@@ -43,7 +42,6 @@ afterAll( () => {
 describe( 'Group block', () => {
 	it( 'inserts block and adds a Heading block as an inner block', async () => {
 		const screen = await initializeEditor();
-		const { getByTestId, getByText } = screen;
 
 		// Add block
 		await addBlock( screen, 'Group' );
@@ -58,7 +56,7 @@ describe( 'Group block', () => {
 		fireEvent.press( appenderButton );
 
 		// Look for a block in the inserter
-		const blockList = getByTestId( 'InserterUI-Blocks' );
+		const blockList = screen.getByTestId( 'InserterUI-Blocks' );
 
 		// onScroll event used to force the FlatList to render all items
 		fireEvent.scroll( blockList, {
@@ -70,7 +68,7 @@ describe( 'Group block', () => {
 		} );
 
 		// Add a block
-		fireEvent.press( await waitFor( () => getByText( 'Heading' ) ) );
+		fireEvent.press( await screen.findByText( 'Heading' ) );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );

package/src/heading/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/heading",
 	"title": "Heading",
 	"category": "text",

package/src/heading/edit.js

@@ -16,12 +16,12 @@ import {
 	RichText,
 	useBlockProps,
 	store as blockEditorStore,
+	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
-import HeadingLevelDropdown from './heading-level-dropdown';
 import { generateAnchor, setAnchor } from './autogenerate-anchors';
 
 function HeadingEdit( {
@@ -92,7 +92,7 @@ function HeadingEdit( {
 		<>
 			<BlockControls group="block">
 				<HeadingLevelDropdown
-					selectedLevel={ level }
+					value={ level }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}

package/src/home-link/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/home-link",
 	"category": "design",
 	"parent": [ "core/navigation" ],
@@ -22,7 +22,6 @@
 		"style"
 	],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"typography": {

package/src/html/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/html",
 	"title": "Custom HTML",
 	"category": "widgets",

package/src/image/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/image",
 	"title": "Image",
 	"category": "media",
@@ -80,13 +80,13 @@
 			"source": "attribute",
 			"selector": "figure > a",
 			"attribute": "target"
-		},
-		"behaviors": {
-			"type": "object"
 		}
 	},
 	"supports": {
 		"anchor": true,
+		"behaviors": {
+			"lightbox": true
+		},
 		"color": {
 			"text": false,
 			"background": false

package/src/image/edit.js

@@ -28,7 +28,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import Image from './image';
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 /**
  * Module constants

package/src/image/image.js

@@ -10,6 +10,7 @@ import {
 	TextareaControl,
 	TextControl,
 	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
 import { useViewportMatch, usePrevious } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -175,14 +176,17 @@ export default function Image( {
 		if (
 			! isExternalImage( id, url ) ||
 			! isSelected ||
-			! canUploadMedia ||
-			externalBlob
+			! canUploadMedia
 		) {
+			setExternalBlob();
 			return;
 		}
 
+		if ( externalBlob ) return;
+
 		window
-			.fetch( url )
+			// Avoid cache, which seems to help avoid CORS problems.
+			.fetch( url.includes( '?' ) ? url : url + '?' )
 			.then( ( response ) => response.blob() )
 			.then( ( blob ) => setExternalBlob( blob ) )
 			// Do nothing, cannot upload.
@@ -370,13 +374,6 @@ export default function Image( {
 						label={ __( 'Crop' ) }
 					/>
 				) }
-				{ externalBlob && (
-					<ToolbarButton
-						onClick={ uploadExternal }
-						icon={ upload }
-						label={ __( 'Upload external image' ) }
-					/>
-				) }
 				{ ! multiImageSelection && canInsertCover && (
 					<ToolbarButton
 						icon={ overlayText }
@@ -398,6 +395,17 @@ export default function Image( {
 					/>
 				</BlockControls>
 			) }
+			{ ! multiImageSelection && externalBlob && (
+				<BlockControls>
+					<ToolbarGroup>
+						<ToolbarButton
+							onClick={ uploadExternal }
+							icon={ upload }
+							label={ __( 'Upload external image' ) }
+						/>
+					</ToolbarGroup>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					{ ! multiImageSelection && (
@@ -515,6 +523,10 @@ export default function Image( {
 			: naturalHeight;
 	}
 
+	// clientWidth needs to be a number for the image Cropper to work, but sometimes it's 0
+	// So we try using the imageRef width first and fallback to clientWidth.
+	const fallbackClientWidth = imageRef.current?.width || clientWidth;
+
 	if ( canEditImage && isEditingImage ) {
 		img = (
 			<ImageEditor
@@ -522,7 +534,7 @@ export default function Image( {
 				url={ url }
 				width={ width }
 				height={ height }
-				clientWidth={ clientWidth }
+				clientWidth={ fallbackClientWidth }
 				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
 				onSaveImage={ ( imageAttributes ) =>