@wordpress/block-library 9.34.0 → 9.35.0

package/src/html/modal.js

@@ -0,0 +1,290 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import {
+	Modal,
+	Button,
+	Flex,
+	privateApis as componentsPrivateApis,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { PlainText, store as blockEditorStore } from '@wordpress/block-editor';
+import { fullscreen, square } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../lock-unlock';
+import Preview from './preview';
+import { parseContent, serializeContent } from './utils';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+export default function HTMLEditModal( {
+	isOpen,
+	onRequestClose,
+	content,
+	setAttributes,
+} ) {
+	// Parse content into separate sections and use as initial state
+	const { html, css, js } = parseContent( content );
+	const [ editedHtml, setEditedHtml ] = useState( html );
+	const [ editedCss, setEditedCss ] = useState( css );
+	const [ editedJs, setEditedJs ] = useState( js );
+	const [ isDirty, setIsDirty ] = useState( false );
+	const [ showUnsavedWarning, setShowUnsavedWarning ] = useState( false );
+	const [ isFullscreen, setIsFullscreen ] = useState( false );
+
+	// Check if user has permission to save scripts and get editor styles
+	const { canUserUseUnfilteredHTML, editorStyles } = useSelect(
+		( select ) => {
+			const settings = select( blockEditorStore ).getSettings();
+			return {
+				canUserUseUnfilteredHTML:
+					settings.__experimentalCanUserUseUnfilteredHTML,
+				editorStyles: settings.styles,
+			};
+		},
+		[]
+	);
+
+	// Show JS tab if user has permission OR if block contains JavaScript
+	const shouldShowJsTab = canUserUseUnfilteredHTML || js.trim() !== '';
+
+	// Combine all editor styles to inject into modal
+	const styleContent = useMemo( () => {
+		if ( ! editorStyles ) {
+			return '';
+		}
+		return editorStyles
+			.filter( ( style ) => style.css )
+			.map( ( style ) => style.css )
+			.join( '\n' );
+	}, [ editorStyles ] );
+
+	if ( ! isOpen ) {
+		return null;
+	}
+
+	const handleHtmlChange = ( value ) => {
+		setEditedHtml( value );
+		setIsDirty( true );
+	};
+	const handleCssChange = ( value ) => {
+		setEditedCss( value );
+		setIsDirty( true );
+	};
+	const handleJsChange = ( value ) => {
+		setEditedJs( value );
+		setIsDirty( true );
+	};
+	const handleUpdate = () => {
+		setAttributes( {
+			content: serializeContent( {
+				html: editedHtml,
+				css: editedCss,
+				js: editedJs,
+			} ),
+		} );
+		setIsDirty( false );
+	};
+	const handleCancel = () => {
+		setIsDirty( false );
+		onRequestClose();
+	};
+	const handleRequestClose = () => {
+		if ( isDirty ) {
+			setShowUnsavedWarning( true );
+		} else {
+			onRequestClose();
+		}
+	};
+	const handleDiscardChanges = () => {
+		setShowUnsavedWarning( false );
+		onRequestClose();
+	};
+	const handleContinueEditing = () => {
+		setShowUnsavedWarning( false );
+	};
+	const handleUpdateAndClose = () => {
+		handleUpdate();
+		onRequestClose();
+	};
+	const toggleFullscreen = () => {
+		setIsFullscreen( ( prevState ) => ! prevState );
+	};
+
+	return (
+		<>
+			<Modal
+				title={ __( 'Edit HTML' ) }
+				onRequestClose={ handleRequestClose }
+				className="block-library-html__modal"
+				size="large"
+				isDismissible={ false }
+				shouldCloseOnClickOutside={ ! isDirty }
+				shouldCloseOnEsc={ ! isDirty }
+				isFullScreen={ isFullscreen }
+				__experimentalHideHeader
+			>
+				{ styleContent && (
+					<style
+						dangerouslySetInnerHTML={ { __html: styleContent } }
+					/>
+				) }
+				<Tabs orientation="horizontal" defaultTabId="html">
+					<VStack spacing={ 4 } style={ { height: '100%' } }>
+						<HStack justify="space-between">
+							<div>
+								<Tabs.TabList>
+									<Tabs.Tab tabId="html">HTML</Tabs.Tab>
+									<Tabs.Tab tabId="css">CSS</Tabs.Tab>
+									{ shouldShowJsTab && (
+										<Tabs.Tab tabId="js">
+											{ __( 'JavaScript' ) }
+										</Tabs.Tab>
+									) }
+								</Tabs.TabList>
+							</div>
+							<div>
+								<Button
+									__next40pxDefaultSize
+									icon={ isFullscreen ? square : fullscreen }
+									label={ __( 'Enable/disable fullscreen' ) }
+									onClick={ toggleFullscreen }
+									variant="tertiary"
+								/>
+							</div>
+						</HStack>
+						<HStack
+							alignment="stretch"
+							justify="flex-start"
+							spacing={ 4 }
+							className="block-library-html__modal-tabs"
+							style={ { flexGrow: 1 } }
+						>
+							<div style={ { flexGrow: 1 } }>
+								<Tabs.TabPanel
+									tabId="html"
+									focusable={ false }
+									className="block-library-html__modal-tab"
+								>
+									<PlainText
+										value={ editedHtml }
+										onChange={ handleHtmlChange }
+										placeholder={ __( 'Write HTML…' ) }
+										aria-label={ __( 'HTML' ) }
+										className="block-library-html__modal-editor"
+									/>
+								</Tabs.TabPanel>
+								<Tabs.TabPanel
+									tabId="css"
+									focusable={ false }
+									className="block-library-html__modal-tab"
+								>
+									<PlainText
+										value={ editedCss }
+										onChange={ handleCssChange }
+										placeholder={ __( 'Write CSS…' ) }
+										aria-label={ __( 'CSS' ) }
+										className="block-library-html__modal-editor"
+									/>
+								</Tabs.TabPanel>
+								{ shouldShowJsTab && (
+									<Tabs.TabPanel
+										tabId="js"
+										focusable={ false }
+										className="block-library-html__modal-tab"
+									>
+										<PlainText
+											value={ editedJs }
+											onChange={ handleJsChange }
+											placeholder={ __(
+												'Write JavaScript…'
+											) }
+											aria-label={ __( 'JavaScript' ) }
+											className="block-library-html__modal-editor"
+										/>
+									</Tabs.TabPanel>
+								) }
+							</div>
+							<div
+								className="block-library-html__preview"
+								style={ { width: '50%' } }
+							>
+								<Preview
+									content={ serializeContent( {
+										html: editedHtml,
+										css: editedCss,
+										js: editedJs,
+									} ) }
+								/>
+							</div>
+						</HStack>
+						<HStack
+							alignment="center"
+							justify="flex-end"
+							spacing={ 4 }
+						>
+							<Button
+								__next40pxDefaultSize
+								variant="tertiary"
+								onClick={ handleCancel }
+							>
+								{ __( 'Cancel' ) }
+							</Button>
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								onClick={ handleUpdateAndClose }
+							>
+								{ __( 'Update' ) }
+							</Button>
+						</HStack>
+					</VStack>
+				</Tabs>
+			</Modal>
+
+			{ showUnsavedWarning && (
+				<Modal
+					title={ __( 'Unsaved changes' ) }
+					onRequestClose={ handleContinueEditing }
+					size="medium"
+				>
+					<p>
+						{ __(
+							'You have unsaved changes. What would you like to do?'
+						) }
+					</p>
+					<Flex direction="row" justify="flex-end" gap={ 2 }>
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ handleDiscardChanges }
+						>
+							{ __( 'Discard unsaved changes' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="secondary"
+							onClick={ handleContinueEditing }
+						>
+							{ __( 'Continue editing' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							onClick={ handleUpdateAndClose }
+						>
+							{ __( 'Update and close' ) }
+						</Button>
+					</Flex>
+				</Modal>
+			) }
+		</>
+	);
+}

package/src/html/test/utils.js

@@ -0,0 +1,234 @@
+/**
+ * Internal dependencies
+ */
+import { parseContent, serializeContent } from '../utils';
+
+describe( 'core/html', () => {
+	describe( 'parseContent()', () => {
+		it( 'should parse empty content', () => {
+			const result = parseContent( '' );
+			expect( result ).toEqual( { html: '', css: '', js: '' } );
+		} );
+
+		it( 'should parse whitespace-only content', () => {
+			const result = parseContent( '   \n\t  ' );
+			expect( result ).toEqual( { html: '', css: '', js: '' } );
+		} );
+
+		it( 'should parse HTML-only content', () => {
+			const content = '<p>Hello World</p>';
+			const result = parseContent( content );
+			expect( result ).toEqual( {
+				html: '<p>Hello World</p>',
+				css: '',
+				js: '',
+			} );
+		} );
+
+		it( 'should parse CSS-only content', () => {
+			const content =
+				'<style data-wp-block-html="css">body { color: red; }</style>';
+			const result = parseContent( content );
+			expect( result ).toEqual( {
+				html: '',
+				css: 'body { color: red; }',
+				js: '',
+			} );
+		} );
+
+		it( 'should parse JavaScript-only content', () => {
+			const content =
+				'<script data-wp-block-html="js">console.log("hello");</script>';
+			const result = parseContent( content );
+			expect( result ).toEqual( {
+				html: '',
+				css: '',
+				js: 'console.log("hello");',
+			} );
+		} );
+
+		it( 'should parse content with all three sections', () => {
+			const content = `<style data-wp-block-html="css">
+body { color: red; }
+</style>
+
+<script data-wp-block-html="js">
+console.log("hello");
+</script>
+
+<p>Hello World</p>`;
+			const result = parseContent( content );
+			expect( result.css ).toBe( 'body { color: red; }' );
+			expect( result.js ).toBe( 'console.log("hello");' );
+			expect( result.html ).toBe( '<p>Hello World</p>' );
+		} );
+
+		it( 'should ignore unmarked style tags', () => {
+			const content = `<style>body { color: blue; }</style>
+<style data-wp-block-html="css">body { color: red; }</style>
+<p>Test</p>`;
+			const result = parseContent( content );
+			expect( result.css ).toBe( 'body { color: red; }' );
+			expect( result.html ).toContain(
+				'<style>body { color: blue; }</style>'
+			);
+		} );
+
+		it( 'should ignore unmarked script tags', () => {
+			const content = `<script>alert("unmarked");</script>
+<script data-wp-block-html="js">console.log("marked");</script>
+<p>Test</p>`;
+			const result = parseContent( content );
+			expect( result.js ).toBe( 'console.log("marked");' );
+			expect( result.html ).toContain(
+				'<script>alert("unmarked");</script>'
+			);
+		} );
+
+		it( 'should handle multiple marked style tags (takes first)', () => {
+			const content = `<style data-wp-block-html="css">first</style>
+<style data-wp-block-html="css">second</style>`;
+			const result = parseContent( content );
+			expect( result.css ).toBe( 'first' );
+			expect( result.html ).toContain( 'second' );
+		} );
+
+		it( 'should handle multiple marked script tags (takes first)', () => {
+			const content = `<script data-wp-block-html="js">first</script>
+<script data-wp-block-html="js">second</script>`;
+			const result = parseContent( content );
+			expect( result.js ).toBe( 'first' );
+			expect( result.html ).toContain( 'second' );
+		} );
+
+		it( 'should trim whitespace from extracted sections', () => {
+			const content = `<style data-wp-block-html="css">
+
+  body { color: red; }
+
+</style>
+
+<script data-wp-block-html="js">
+
+  console.log("test");
+
+</script>
+
+  <p>Test</p>  `;
+			const result = parseContent( content );
+			expect( result.css ).toBe( 'body { color: red; }' );
+			expect( result.js ).toBe( 'console.log("test");' );
+			expect( result.html ).toBe( '<p>Test</p>' );
+		} );
+
+		it( 'should handle malformed HTML gracefully', () => {
+			const content = '<p>Unclosed tag<div>Test</p>';
+			const result = parseContent( content );
+			expect( result ).toHaveProperty( 'html' );
+			expect( result ).toHaveProperty( 'css' );
+			expect( result ).toHaveProperty( 'js' );
+		} );
+	} );
+
+	describe( 'serializeContent()', () => {
+		it( 'should serialize empty sections', () => {
+			const result = serializeContent( { html: '', css: '', js: '' } );
+			expect( result ).toBe( '' );
+		} );
+
+		it( 'should serialize HTML-only', () => {
+			const result = serializeContent( {
+				html: '<p>Hello World</p>',
+				css: '',
+				js: '',
+			} );
+			expect( result ).toBe( '<p>Hello World</p>' );
+		} );
+
+		it( 'should serialize CSS-only', () => {
+			const result = serializeContent( {
+				html: '',
+				css: 'body { color: red; }',
+				js: '',
+			} );
+			expect( result ).toBe(
+				'<style data-wp-block-html="css">\nbody { color: red; }\n</style>'
+			);
+		} );
+
+		it( 'should serialize JavaScript-only', () => {
+			const result = serializeContent( {
+				html: '',
+				css: '',
+				js: 'console.log("test");',
+			} );
+			expect( result ).toBe(
+				'<script data-wp-block-html="js">\nconsole.log("test");\n</script>'
+			);
+		} );
+
+		it( 'should serialize all three sections in correct order', () => {
+			const result = serializeContent( {
+				html: '<p>Hello</p>',
+				css: 'body { color: red; }',
+				js: 'console.log("test");',
+			} );
+			expect( result ).toBe(
+				'<style data-wp-block-html="css">\nbody { color: red; }\n</style>\n\n<script data-wp-block-html="js">\nconsole.log("test");\n</script>\n\n<p>Hello</p>'
+			);
+		} );
+
+		it( 'should ignore whitespace-only sections', () => {
+			const result = serializeContent( {
+				html: '<p>Test</p>',
+				css: '   \n  ',
+				js: '\t\t',
+			} );
+			expect( result ).toBe( '<p>Test</p>' );
+		} );
+
+		it( 'should handle missing properties gracefully', () => {
+			const result = serializeContent( {} );
+			expect( result ).toBe( '' );
+		} );
+
+		it( 'should handle undefined values', () => {
+			const result = serializeContent( {
+				html: undefined,
+				css: undefined,
+				js: undefined,
+			} );
+			expect( result ).toBe( '' );
+		} );
+	} );
+
+	describe( 'round-trip serialization', () => {
+		it( 'should maintain HTML-only content', () => {
+			const original = '<p>Hello World</p>';
+			const parsed = parseContent( original );
+			const serialized = serializeContent( parsed );
+			expect( serialized ).toBe( original );
+		} );
+
+		it( 'should maintain content with all sections', () => {
+			const original =
+				'<style data-wp-block-html="css">\nbody { color: red; }\n</style>\n\n<script data-wp-block-html="js">\nconsole.log("test");\n</script>\n\n<p>Hello</p>';
+			const parsed = parseContent( original );
+			const serialized = serializeContent( parsed );
+			expect( serialized ).toBe( original );
+		} );
+
+		it( 'should maintain complex HTML structures', () => {
+			const sections = {
+				html: '<div><h1>Title</h1><p>Paragraph</p></div>',
+				css: 'h1 { font-size: 2em; }',
+				js: 'document.addEventListener("load", () => {});',
+			};
+			const serialized = serializeContent( sections );
+			const parsed = parseContent( serialized );
+			expect( parsed.html ).toBe( sections.html );
+			expect( parsed.css ).toBe( sections.css );
+			expect( parsed.js ).toBe( sections.js );
+		} );
+	} );
+} );

package/src/html/utils.js

@@ -0,0 +1,75 @@
+/**
+ * Parses content string into separate HTML, CSS, and JS sections.
+ *
+ * Extracts CSS from <style data-wp-block-html="css"> tags and
+ * JavaScript from <script data-wp-block-html="js"> tags.
+ * Everything else is treated as HTML.
+ *
+ * @param {string} content - The combined content string
+ * @return {Object} Object with html, css, and js properties
+ */
+export function parseContent( content = '' ) {
+	if ( ! content || ! content.trim() ) {
+		return { html: '', css: '', js: '' };
+	}
+
+	// Create a temporary document to parse HTML safely
+	const doc = document.implementation.createHTMLDocument( '' );
+	doc.body.innerHTML = content;
+
+	// Extract CSS from marked style tag
+	const styleTag = doc.body.querySelector(
+		'style[data-wp-block-html="css"]'
+	);
+	const css = styleTag ? styleTag.textContent.trim() : '';
+	if ( styleTag ) {
+		styleTag.remove();
+	}
+
+	// Extract JS from marked script tag
+	const scriptTag = doc.body.querySelector(
+		'script[data-wp-block-html="js"]'
+	);
+	const js = scriptTag ? scriptTag.textContent.trim() : '';
+	if ( scriptTag ) {
+		scriptTag.remove();
+	}
+
+	// Everything else is HTML
+	const html = doc.body.innerHTML.trim();
+
+	return { html, css, js };
+}
+
+/**
+ * Serializes HTML, CSS, and JS into a single content string.
+ *
+ * Creates marked <style> and <script> tags for CSS and JS sections,
+ * then appends the HTML content.
+ *
+ * @param {Object} sections      Object with html, css, and js properties
+ * @param {string} sections.html HTML content
+ * @param {string} sections.css  CSS content
+ * @param {string} sections.js   JavaScript content
+ * @return {string} Combined content string
+ */
+export function serializeContent( { html = '', css = '', js = '' } ) {
+	const parts = [];
+
+	// Add CSS if present
+	if ( css.trim() ) {
+		parts.push( `<style data-wp-block-html="css">\n${ css }\n</style>` );
+	}
+
+	// Add JS if present
+	if ( js.trim() ) {
+		parts.push( `<script data-wp-block-html="js">\n${ js }\n</script>` );
+	}
+
+	// Add HTML
+	if ( html.trim() ) {
+		parts.push( html );
+	}
+
+	return parts.join( '\n\n' );
+}

package/src/image/constants.js

@@ -8,3 +8,9 @@ export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
 export const SIZED_LAYOUTS = [ 'flex', 'grid' ];
 export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
+
+/**
+ * Delay in milliseconds before preloading an image after hovering.
+ * This prevents unnecessary preloading during quick scrolling or mouse movements.
+ */
+export const IMAGE_PRELOAD_DELAY = 200;

package/src/image/image.js

@@ -911,9 +911,6 @@ export default function Image( {
 				<Spinner />
 			</Placeholder>
 		) : (
-			// Disable reason: Image itself is not meant to be interactive, but
-			// should direct focus to block.
-			/* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 			<>
 				<img
 					src={ temporaryURL || url }
@@ -940,7 +937,6 @@ export default function Image( {
 				/>
 				{ temporaryURL && <Spinner /> }
 			</>
-			/* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */
 		);
 
 	if ( canEditImage && isEditingImage ) {

package/src/image/index.php

@@ -202,6 +202,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
 		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
+		$img_srcset       = wp_get_attachment_image_srcset( $block['attrs']['id'] );
 		$img_width        = $img_metadata['width'] ?? 'none';
 		$img_height       = $img_metadata['height'] ?? 'none';
 	}
@@ -220,6 +221,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			'metadata' => array(
 				$unique_image_id => array(
 					'uploadedSrc'      => $img_uploaded_src,
+					'lightboxSrcset'   => $img_srcset,
 					'figureClassNames' => $figure_class_names,
 					'figureStyles'     => $figure_styles,
 					'imgClassNames'    => $img_class_names,
@@ -252,6 +254,14 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$processor->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
 	$processor->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
 	$processor->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
+
+	// Set an event to preload the image on pointerenter and pointerdown(mobile).
+	// Pointerleave is used to cancel the preload if the user hovers away from the image
+	// before the predefined delay.
+	$processor->set_attribute( 'data-wp-on--pointerenter', 'actions.preloadImageWithDelay' );
+	$processor->set_attribute( 'data-wp-on--pointerdown', 'actions.preloadImage' );
+	$processor->set_attribute( 'data-wp-on--pointerleave', 'actions.cancelPreload' );
+
 	// Sets an event callback on the `img` because the `figure` element can also
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.
@@ -343,7 +353,14 @@ function block_core_image_print_lightbox_overlay() {
 				</div>
 				<div class="lightbox-image-container">
 					<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
-						<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
+						<img
+							data-wp-bind--alt="state.currentImage.alt"
+							data-wp-bind--class="state.currentImage.imgClassNames"
+							data-wp-bind--style="state.imgStyles"
+							data-wp-bind--src="state.enlargedSrc"
+							data-wp-bind--srcset="state.enlargedSrcset"
+							sizes="100vw"
+						>
 					</figure>
 				</div>
 				<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>