diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3a0a88048e982f..178f27aa92665f 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -379,7 +379,7 @@ Add custom HTML code and preview it as you edit. ([Source](https://github.com/Wo - **Name:** core/html - **Category:** widgets - **Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~ -- **Attributes:** content +- **Attributes:** content, isPreview ## Image diff --git a/packages/block-library/src/html/block.json b/packages/block-library/src/html/block.json index 08587f69bbd460..8ad5e8c86848bc 100644 --- a/packages/block-library/src/html/block.json +++ b/packages/block-library/src/html/block.json @@ -11,6 +11,10 @@ "content": { "type": "string", "source": "raw" + }, + "isPreview": { + "type": "boolean", + "default": false } }, "supports": { diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js index 5c57d73ae40f6c..31391811c8312f 100644 --- a/packages/block-library/src/html/edit.js +++ b/packages/block-library/src/html/edit.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useContext, useState } from '@wordpress/element'; import { BlockControls, PlainText, @@ -10,7 +9,6 @@ import { } from '@wordpress/block-editor'; import { ToolbarButton, - Disabled, ToolbarGroup, VisuallyHidden, } from '@wordpress/components'; @@ -22,22 +20,10 @@ import { useInstanceId } from '@wordpress/compose'; import Preview from './preview'; export default function HTMLEdit( { attributes, setAttributes, isSelected } ) { - const [ isPreview, setIsPreview ] = useState(); - const isDisabled = useContext( Disabled.Context ); - const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' ); - - function switchToPreview() { - setIsPreview( true ); - } - - function switchToHTML() { - setIsPreview( false ); - } - const blockProps = useBlockProps( { className: 'block-library-html__edit', - 'aria-describedby': isPreview ? instanceId : undefined, + 'aria-describedby': attributes.isPreview ? instanceId : undefined, } ); return ( @@ -45,20 +31,20 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) { setAttributes( { isPreview: false } ) } > - HTML + { __( 'Edit' ) } setAttributes( { isPreview: true } ) } > { __( 'Preview' ) } - { isPreview || isDisabled ? ( + { attributes.isPreview ? ( <> Some HTML code\n
This is a div
" + "content": "

Some HTML code

\n
This is a div
", + "isPreview": false }, "innerBlocks": [] }