@wordpress/block-library 10.1.0 → 10.1.1-next.v.202607070741.0

package/src/html/save.js

@@ -1,8 +1,5 @@
-/**
- * WordPress dependencies
- */
-import { RawHTML } from '@wordpress/element';
-
-export default function save( { attributes } ) {
-	return <RawHTML>{ attributes.content }</RawHTML>;
+// The block's markup is serialized from its `innerContent` (static HTML
+// fragments interleaved with inner blocks), not from a save implementation.
+export default function save() {
+	return null;
 }

package/src/html/test/index.js

@@ -0,0 +1,143 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	createBlock,
+	registerBlockType,
+	serialize,
+	switchToBlockType,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+import { create, toHTMLString } from '@wordpress/rich-text';
+
+/**
+ * Internal dependencies
+ */
+import * as html from '../';
+
+describe( 'core/html', () => {
+	beforeAll( () => {
+		registerBlockType(
+			{ name: html.name, ...html.metadata },
+			html.settings
+		);
+	} );
+
+	afterAll( () => {
+		unregisterBlockType( html.name );
+	} );
+
+	describe( 'deprecated content attribute', () => {
+		it( 'preserves content passed to createBlock', () => {
+			const block = createBlock( 'core/html', {
+				content: '<marquee>Hello</marquee>',
+			} );
+
+			// The attribute is kept so it can be migrated rather than dropped.
+			expect( block.attributes.content ).toBe(
+				'<marquee>Hello</marquee>'
+			);
+		} );
+
+		it( 'keeps the content attribute out of the block delimiter', () => {
+			const block = createBlock( 'core/html', {
+				content: '<marquee>Hello</marquee>',
+			} );
+
+			// `role: 'local'` prevents the attribute from being written into
+			// the comment delimiter as JSON.
+			expect( serialize( block ) ).not.toContain( '{"content"' );
+		} );
+	} );
+
+	describe( 'inner content', () => {
+		it( 'serializes from inner content interleaved with inner blocks', () => {
+			registerBlockType( 'core/paragraph', {
+				apiVersion: 3,
+				category: 'text',
+				title: 'Paragraph',
+				attributes: {
+					content: { type: 'string', source: 'html' },
+				},
+				save: ( { attributes } ) => attributes.content || null,
+			} );
+
+			const block = createBlock(
+				'core/html',
+				{},
+				[ createBlock( 'core/paragraph', { content: 'Editable' } ) ],
+				[ '<div>', null, '</div>' ]
+			);
+
+			expect( serialize( block ) ).toBe(
+				'<!-- wp:html -->\n' +
+					'<div><!-- wp:paragraph -->\n' +
+					'Editable\n' +
+					'<!-- /wp:paragraph --></div>\n' +
+					'<!-- /wp:html -->'
+			);
+
+			unregisterBlockType( 'core/paragraph' );
+		} );
+	} );
+
+	describe( 'transform from core/code', () => {
+		beforeEach( () => {
+			registerBlockType( 'core/paragraph', {
+				apiVersion: 3,
+				category: 'text',
+				title: 'Paragraph',
+				attributes: {
+					content: { type: 'string', source: 'html' },
+				},
+				save: ( { attributes } ) => attributes.content || null,
+			} );
+			// A minimal stand-in: the transform only reads `attributes.content`.
+			registerBlockType( 'core/code', {
+				apiVersion: 3,
+				category: 'text',
+				title: 'Code',
+				attributes: {
+					content: { type: 'string', source: 'html' },
+				},
+				save: ( { attributes } ) => attributes.content || null,
+			} );
+		} );
+
+		afterEach( () => {
+			unregisterBlockType( 'core/code' );
+			unregisterBlockType( 'core/paragraph' );
+		} );
+
+		// Mirrors how the code block stores HTML-block source: as escaped,
+		// plain-text rich text.
+		const asCodeContent = ( source ) =>
+			toHTMLString( { value: create( { text: source } ) } );
+
+		it( 'restores block delimiters as editable inner blocks', () => {
+			const codeBlock = createBlock( 'core/code', {
+				content: asCodeContent(
+					'<div><!-- wp:paragraph -->\nEditable\n<!-- /wp:paragraph --></div>'
+				),
+			} );
+
+			const [ htmlBlock ] = switchToBlockType( codeBlock, 'core/html' );
+
+			expect( htmlBlock.name ).toBe( 'core/html' );
+			expect( htmlBlock.innerBlocks ).toHaveLength( 1 );
+			expect( htmlBlock.innerBlocks[ 0 ].name ).toBe( 'core/paragraph' );
+			expect( htmlBlock.innerContent ).toContain( null );
+		} );
+
+		it( 'keeps plain code (no delimiters) as a single static fragment', () => {
+			const codeBlock = createBlock( 'core/code', {
+				content: asCodeContent( '<div>Just static HTML</div>' ),
+			} );
+
+			const [ htmlBlock ] = switchToBlockType( codeBlock, 'core/html' );
+
+			expect( htmlBlock.innerBlocks ).toHaveLength( 0 );
+			expect( htmlBlock.innerContent ).not.toContain( null );
+		} );
+	} );
+} );

package/src/html/transforms.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, parse } from '@wordpress/blocks';
 import { create } from '@wordpress/rich-text';
 
 const transforms = {
@@ -10,11 +10,16 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/code' ],
 			transform: ( { content: html } ) => {
-				return createBlock( 'core/html', {
-					// The code block may output HTML formatting, so convert it
-					// to plain text.
-					content: create( { html } ).text,
-				} );
+				// The code block may output HTML formatting, so convert it
+				// to plain text, then parse it so any block delimiters become
+				// editable inner blocks at their positions within the static
+				// HTML, rather than inert comment text.
+				const text = create( { html } ).text;
+				const [ block ] = parse(
+					`<!-- wp:html -->\n${ text }\n<!-- /wp:html -->`
+				);
+
+				return block ?? createBlock( 'core/html', {}, [], [ text ] );
 			},
 		},
 	],

package/src/icon/index.php

@@ -19,13 +19,6 @@ function render_block_core_icon( $attributes ) {
 		return;
 	}
 
-	$registry = WP_Icons_Registry::get_instance();
-	$icon     = $registry->get_registered_icon( $attributes['icon'] );
-
-	if ( is_null( $icon ) ) {
-		return;
-	}
-
 	// Text color and background color.
 	$color_styles = array();
 
@@ -86,54 +79,54 @@ function render_block_core_icon( $attributes ) {
 		),
 	);
 
-	$processor = new WP_HTML_Tag_Processor( $icon['content'] );
-	$processor->next_tag( 'svg' );
+	$svg = wp_get_icon(
+		$attributes['icon'],
+		array(
+			// Width is applied via the dimensions block support styles below.
+			'size'  => null,
+			'class' => $styles['classnames'] ?? '',
+			'label' => $attributes['ariaLabel'] ?? '',
+		)
+	);
 
-	if ( ! empty( $styles['css'] ) ) {
-		$processor->set_attribute( 'style', $styles['css'] );
-	}
-	if ( ! empty( $styles['classnames'] ) ) {
-		$processor->add_class( $styles['classnames'] );
+	if ( '' === $svg ) {
+		return;
 	}
 
-	// Apply flip classes to the SVG.
-	$flip_horizontal = $attributes['flipHorizontal'] ?? false;
-	$flip_vertical   = $attributes['flipVertical'] ?? false;
-
-	if ( $flip_horizontal ) {
-		$processor->add_class( 'is-flip-horizontal' );
-	}
-	if ( $flip_vertical ) {
-		$processor->add_class( 'is-flip-vertical' );
-	}
+	$processor = new WP_HTML_Tag_Processor( $svg );
+	if ( $processor->next_tag( 'svg' ) ) {
+		if ( ! empty( $styles['css'] ) ) {
+			$processor->set_attribute( 'style', $styles['css'] );
+		}
 
-	$rotation = isset( $attributes['rotation'] ) ? (int) $attributes['rotation'] : 0;
+		// Apply flip classes to the SVG.
+		$flip_horizontal = $attributes['flipHorizontal'] ?? false;
+		$flip_vertical   = $attributes['flipVertical'] ?? false;
 
-	if ( $rotation ) {
-		$current_style = $processor->get_attribute( 'style' ) ?? '';
-		$rotation_css  = 'rotate: ' . $rotation . 'deg;';
-		if ( $current_style ) {
-			$processor->set_attribute( 'style', $current_style . ' ' . $rotation_css );
-		} else {
-			$processor->set_attribute( 'style', $rotation_css );
+		if ( $flip_horizontal ) {
+			$processor->add_class( 'is-flip-horizontal' );
+		}
+		if ( $flip_vertical ) {
+			$processor->add_class( 'is-flip-vertical' );
 		}
-	}
 
-	$aria_label = ! empty( $attributes['ariaLabel'] ) ? $attributes['ariaLabel'] : '';
+		$rotation = isset( $attributes['rotation'] ) ? (int) $attributes['rotation'] : 0;
+
+		if ( $rotation ) {
+			$current_style = $processor->get_attribute( 'style' ) ?? '';
+			$rotation_css  = 'rotate: ' . $rotation . 'deg;';
+			if ( $current_style ) {
+				$processor->set_attribute( 'style', $current_style . ' ' . $rotation_css );
+			} else {
+				$processor->set_attribute( 'style', $rotation_css );
+			}
+		}
 
-	if ( ! $aria_label ) {
-		// Icon is decorative, hide it from screen readers.
-		$processor->set_attribute( 'aria-hidden', 'true' );
-		$processor->set_attribute( 'focusable', 'false' );
-	} else {
-		$processor->set_attribute( 'role', 'img' );
-		$processor->set_attribute( 'aria-label', $aria_label );
+		$svg = $processor->get_updated_html();
 	}
 
-	// Return the updated SVG markup.
-	$svg        = $processor->get_updated_html();
-	$attributes = get_block_wrapper_attributes();
-	return sprintf( '<div %s>%s</div>', $attributes, $svg );
+	$wrapper_attributes = get_block_wrapper_attributes();
+	return sprintf( '<div %s>%s</div>', $wrapper_attributes, $svg );
 }
 
 

package/src/image/animated-gif-convert-control.js

@@ -0,0 +1,135 @@
+/**
+ * WordPress dependencies
+ */
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import {
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { createBlock } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { video as videoIcon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { getCarriedGifConversionAttributes } from '../utils/gif-conversion-attributes';
+
+/**
+ * Toolbar control that turns an animated GIF Image block into a converted Video
+ * block once the GIF's sideloaded video companion is available.
+ *
+ * Mirrors the Video block's "Display as GIF" toolbar control. Fresh uploads
+ * are swapped automatically from the image block's `onSelectImage`; this
+ * control is the explicit path for image blocks that came from saved post
+ * content (or that the author restored from a converted Video block via
+ * "Display as GIF") and now want to be played as a looping video.
+ *
+ * @param {Object} props            Component props.
+ * @param {Object} props.attributes Image block attributes.
+ * @param {string} props.clientId   Block client ID.
+ *
+ * @return {Component|null} The control, or null when conversion does not apply.
+ */
+export default function AnimatedGifConvertControl( { attributes, clientId } ) {
+	const { id, url, caption } = attributes;
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	const companion = useSelect(
+		( select ) => {
+			if ( ! id ) {
+				return null;
+			}
+			/*
+			 * Only animated GIFs have a video companion. Gate on the `.gif`
+			 * extension so an ordinary image never triggers an attachment
+			 * REST fetch just to discover it has no companion. Strip any
+			 * query string or fragment first so a URL like `cat.gif?ver=2`
+			 * still matches.
+			 */
+			const urlPath = url?.split( /[?#]/ )[ 0 ];
+			if ( ! urlPath?.toLowerCase().endsWith( '.gif' ) ) {
+				return null;
+			}
+			// A gallery only accepts `core/image` children, so swapping the
+			// image for a video block there would be rejected. Hide the
+			// control inside a gallery; the converted video is still
+			// sideloaded and stored for use elsewhere.
+			const { getBlockRootClientId, getBlockName } =
+				select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			if (
+				rootClientId &&
+				getBlockName( rootClientId ) === 'core/gallery'
+			) {
+				return null;
+			}
+			const record = select( coreStore ).getEntityRecord(
+				'postType',
+				'attachment',
+				id,
+				{ context: 'view' }
+			);
+			const details = record?.media_details;
+			if ( ! details?.animated_video || ! record?.source_url ) {
+				return null;
+			}
+			return {
+				sourceUrl: record.source_url,
+				video: details.animated_video,
+				poster: details.animated_video_poster,
+				width: details.width,
+				height: details.height,
+			};
+		},
+		[ id, url, clientId ]
+	);
+
+	if ( ! companion ) {
+		return null;
+	}
+
+	function convertToVideo() {
+		// Companion files are sideloaded next to the GIF, so they share its
+		// directory; build their URLs from the GIF's own source URL.
+		const dir = companion.sourceUrl.slice(
+			0,
+			companion.sourceUrl.lastIndexOf( '/' ) + 1
+		);
+
+		replaceBlocks(
+			clientId,
+			createBlock( 'core/video', {
+				...getCarriedGifConversionAttributes( attributes ),
+				id,
+				src: dir + companion.video,
+				poster: companion.poster ? dir + companion.poster : undefined,
+				caption,
+				controls: false,
+				loop: true,
+				autoplay: true,
+				muted: true,
+				playsInline: true,
+				// Carry the GIF's intrinsic dimensions so the <video> keeps its
+				// aspect ratio from the first paint. Without them the element
+				// collapses to the browser-default size and then jumps once the
+				// poster/metadata load, which shows up as a brief duplicated
+				// image during the swap.
+				width: companion.width,
+				height: companion.height,
+			} )
+		);
+	}
+
+	return (
+		<BlockControls group="other">
+			<ToolbarGroup>
+				<ToolbarButton icon={ videoIcon } onClick={ convertToVideo }>
+					{ __( 'Display as video' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
+		</BlockControls>
+	);
+}

package/src/image/edit.js

@@ -31,6 +31,7 @@ import { store as uploadStore } from '@wordpress/upload-media';
  * Internal dependencies
  */
 import { useUploadMediaFromBlobURL } from '../utils/hooks';
+import { getCarriedGifConversionAttributes } from '../utils/gif-conversion-attributes';
 import Image from './image';
 import { isValidFileType } from './utils';
 import { useMaxWidthObserver } from './use-max-width-observer';
@@ -237,6 +238,57 @@ export function ImageEdit( {
 			return;
 		}
 
+		// Switch to a converted GIF video block when the selected media is
+		// an animated GIF whose sideloaded video companion is available.
+		// Triggering off the upload's onChange (rather than watching the
+		// attachment record) means already-saved image blocks are left
+		// alone on page load - the explicit "Display as video" toolbar
+		// button is the path for converting those. `animated_video` is
+		// only ever set on GIF image attachments, so its presence is a
+		// sufficient signal that this swap applies.
+		//
+		// A gallery only accepts `core/image` children, so the swap is
+		// skipped there; the converted video is still sideloaded and
+		// stored for use elsewhere.
+		const rootClientId = getBlockRootClientId( clientId );
+		const isInGallery =
+			!! rootClientId && getBlockName( rootClientId ) === 'core/gallery';
+		if (
+			! isInGallery &&
+			media.media_details?.animated_video &&
+			media.url
+		) {
+			const dir = media.url.slice( 0, media.url.lastIndexOf( '/' ) + 1 );
+			const poster = media.media_details.animated_video_poster;
+			__unstableMarkNextChangeAsNotPersistent();
+			replaceBlock(
+				clientId,
+				createBlock( 'core/video', {
+					...getCarriedGifConversionAttributes( attributes ),
+					id: media.id,
+					src: dir + media.media_details.animated_video,
+					poster: poster ? dir + poster : undefined,
+					caption: media.caption?.raw ?? media.caption,
+					controls: false,
+					loop: true,
+					autoplay: true,
+					muted: true,
+					playsInline: true,
+					/*
+					 * Carry the GIF's intrinsic dimensions so the <video> keeps
+					 * its aspect ratio from the first paint. Without them the
+					 * element collapses to the browser-default size and then
+					 * jumps once the poster/metadata load, which shows up as a
+					 * brief duplicated image during the swap.
+					 */
+					width: media.media_details.width,
+					height: media.media_details.height,
+				} )
+			);
+			setTemporaryURL();
+			return;
+		}
+
 		const { imageDefaultSize } = getSettings();
 
 		// Try to use the previous selected image size if its available

package/src/image/editor.scss

@@ -17,6 +17,15 @@ figure.wp-block-image:not(.wp-block) {
 .wp-block-image {
 	position: relative;
 
+	// While uploading or processing client-side, hug the preview so the
+	// centered spinner lands on the image. A preview narrower than the content
+	// width (e.g. a small animated GIF being transcoded to a video) otherwise
+	// leaves the spinner off to one side. Wide and full alignments keep their
+	// own width.
+	&.is-transient:not(.alignwide):not(.alignfull) {
+		width: fit-content;
+	}
+
 	.is-applying img,
 	&.is-transient img {
 		opacity: 0.3;