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\nThis is a div
"
+ "content": "Some HTML code
\nThis is a div
",
+ "isPreview": false
},
"innerBlocks": []
}