@wordpress/block-library 9.34.1-next.2f1c7c01b.0 → 9.35.0

package/src/html/editor.scss

@@ -1,4 +1,6 @@
 @use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
 
 .block-library-html__edit {
 	.block-library-html__preview-overlay {
@@ -8,16 +10,73 @@
 		top: 0;
 		left: 0;
 	}
+}
+
+// Modal styles
+.block-library-html__modal {
+	// Make modal content scrollable
+	.components-modal__content {
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+		min-height: 70vh;
+	}
+
+	.components-modal__children-container {
+		height: 100%;
+		padding: $grid-unit-20;
+	}
+}
+
+.block-library-html__modal-tabs {
+	height: 100%;
+}
+
+.block-library-html__modal-tab {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	box-sizing: border-box;
+	border: 1px solid $gray-200;
+	border-radius: 2px;
+	padding: $grid-unit-20;
+	font-family: $editor-html-font;
+}
+
+.block-library-html__modal-editor {
+	width: 100%;
+	height: 100%;
+	flex: 1;
+	// Reset textarea styles to inherit from pre
+	border: none;
+	background: transparent;
+	padding: 0;
+	font-family: inherit;
+	font-size: inherit;
+	line-height: inherit;
+	color: inherit;
+	resize: none;
+	// HTML input is always LTR regardless of language.
+	/*rtl:ignore*/
+	direction: ltr;
+	overflow-x: auto;
+	box-sizing: border-box;
 
-	// The editing view for the HTML block is equivalent to block UI.
-	// Therefore we increase specificity to avoid theme styles bleeding in.
-	.block-editor-plain-text {
-		display: block;
-		box-sizing: border-box;
-		max-height: 250px;
-		@include editor-input-reset();
-		// HTML input is always LTR regardless of language.
-		/*rtl:ignore*/
-		direction: ltr;
+	&:focus {
+		outline: none;
+		box-shadow: none;
 	}
 }
+
+.block-library-html__preview {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: $grid-unit-60;
+}
+
+.block-library-html__modal-actions {
+	margin-top: $grid-unit-20;
+	padding: 0 $grid-unit-40 $grid-unit-40;
+}

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