From 44dbfa60a6a4564b6c49ab9979d6a8ce0c942d18 Mon Sep 17 00:00:00 2001 From: George Mamadashvili Date: Wed, 23 Mar 2022 18:43:18 +0400 Subject: [PATCH] HTML: Use 'Disabled.Context' (#39669) --- packages/block-library/src/html/edit.js | 52 +++++++++++-------------- 1 file changed, 22 insertions(+), 30 deletions(-) diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js index e27806f9955f57..f8137a2982cfc7 100644 --- a/packages/block-library/src/html/edit.js +++ b/packages/block-library/src/html/edit.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; +import { useContext, useState } from '@wordpress/element'; import { BlockControls, PlainText, @@ -20,6 +20,7 @@ import { useSelect } from '@wordpress/data'; export default function HTMLEdit( { attributes, setAttributes, isSelected } ) { const [ isPreview, setIsPreview ] = useState(); + const isDisabled = useContext( Disabled.Context ); const styles = useSelect( ( select ) => { // Default styles used to unset some of the styles @@ -69,35 +70,26 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) { - - { ( isDisabled ) => - isPreview || isDisabled ? ( - <> - - { /* - An overlay is added when the block is not selected in order to register click events. - Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it - difficult to reselect the block. - */ } - { ! isSelected && ( -
- ) } - - ) : ( - - setAttributes( { content } ) - } - placeholder={ __( 'Write HTML…' ) } - aria-label={ __( 'HTML' ) } - /> - ) - } - </Disabled.Consumer> + { isPreview || isDisabled ? ( + <> + <SandBox html={ attributes.content } styles={ styles } /> + { /* + An overlay is added when the block is not selected in order to register click events. + Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it + difficult to reselect the block. + */ } + { ! isSelected && ( + <div className="block-library-html__preview-overlay"></div> + ) } + </> + ) : ( + <PlainText + value={ attributes.content } + onChange={ ( content ) => setAttributes( { content } ) } + placeholder={ __( 'Write HTML…' ) } + aria-label={ __( 'HTML' ) } + /> + ) } </div> ); }