@wordpress/block-library 9.34.1-next.2f1c7c01b.0 → 9.35.1-next.16d95556a.0

package/src/heading/variations.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Path, SVG } from '@wordpress/primitives';
+import { heading } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'heading',
+		title: __( 'Heading' ),
+		description: __(
+			'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.'
+		),
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		attributes: { fitText: undefined },
+		icon: heading,
+	},
+	// There is a hardcoded workaround in packages/block-editor/src/store/selectors.js
+	// to make Stretchy variations appear as the last of their sections in the inserter.
+	{
+		name: 'stretchy-heading',
+		title: __( 'Stretchy Heading' ),
+		description: __( 'Heading that resizes to fit its container.' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Path d="m3 18.6 6-4.7 6 4.7V5H3v13.6Zm16.2-9.8v1.5h2.2L17.7 14l1.1 1.1 3.7-3.7v2.2H24V8.8h-4.8Z" />
+			</SVG>
+		),
+		attributes: { fitText: true },
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes.fitText === true,
+	},
+];
+
+export default variations;

package/src/html/edit.js

@@ -2,88 +2,94 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useContext, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import {
 	BlockControls,
-	PlainText,
+	BlockIcon,
+	InspectorControls,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	ToolbarButton,
-	Disabled,
 	ToolbarGroup,
-	VisuallyHidden,
+	Placeholder,
+	Button,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useInstanceId } from '@wordpress/compose';
+import { code } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Preview from './preview';
+import HTMLEditModal from './modal';
 
 export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
-	const [ isPreview, setIsPreview ] = useState();
-	const isDisabled = useContext( Disabled.Context );
-
-	const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );
-
-	const isPreviewMode = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings().isPreviewMode;
-	}, [] );
-
-	function switchToPreview() {
-		setIsPreview( true );
-	}
-
-	function switchToHTML() {
-		setIsPreview( false );
-	}
-
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const blockProps = useBlockProps( {
 		className: 'block-library-html__edit',
-		'aria-describedby': isPreview ? instanceId : undefined,
 	} );
 
+	// Show placeholder when content is empty
+	if ( ! attributes.content?.trim() ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder
+					icon={ <BlockIcon icon={ code } /> }
+					label={ __( 'Custom HTML' ) }
+					instructions={ __(
+						'Add custom HTML code and preview how it looks.'
+					) }
+				>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ () => setIsModalOpen( true ) }
+					>
+						{ __( 'Edit HTML' ) }
+					</Button>
+				</Placeholder>
+				<HTMLEditModal
+					isOpen={ isModalOpen }
+					onRequestClose={ () => setIsModalOpen( false ) }
+					content={ attributes.content }
+					setAttributes={ setAttributes }
+				/>
+			</div>
+		);
+	}
+
 	return (
 		<div { ...blockProps }>
 			<BlockControls>
 				<ToolbarGroup>
-					<ToolbarButton
-						isPressed={ ! isPreview }
-						onClick={ switchToHTML }
-					>
-						HTML
-					</ToolbarButton>
-					<ToolbarButton
-						isPressed={ isPreview }
-						onClick={ switchToPreview }
-					>
-						{ __( 'Preview' ) }
+					<ToolbarButton onClick={ () => setIsModalOpen( true ) }>
+						{ __( 'Edit code' ) }
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>
-			{ isPreview || isPreviewMode || isDisabled ? (
-				<>
-					<Preview
-						content={ attributes.content }
-						isSelected={ isSelected }
-					/>
-					<VisuallyHidden id={ instanceId }>
-						{ __(
-							'HTML preview is not yet fully accessible. Please switch screen reader to virtualized mode to navigate the below iFrame.'
-						) }
-					</VisuallyHidden>
-				</>
-			) : (
-				<PlainText
-					value={ attributes.content }
-					onChange={ ( content ) => setAttributes( { content } ) }
-					placeholder={ __( 'Write HTML…' ) }
-					aria-label={ __( 'HTML' ) }
-				/>
-			) }
+			<InspectorControls>
+				<VStack
+					className="block-editor-block-inspector-edit-contents"
+					expanded
+				>
+					<Button
+						className="block-editor-block-inspector-edit-contents__button"
+						__next40pxDefaultSize
+						variant="secondary"
+						onClick={ () => setIsModalOpen( true ) }
+					>
+						{ __( 'Edit code' ) }
+					</Button>
+				</VStack>
+			</InspectorControls>
+			<Preview content={ attributes.content } isSelected={ isSelected } />
+			<HTMLEditModal
+				isOpen={ isModalOpen }
+				onRequestClose={ () => setIsModalOpen( false ) }
+				content={ attributes.content }
+				setAttributes={ setAttributes }
+			/>
 		</div>
 	);
 }

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