From 45af35f1a607d3017e5bb06522c3b3231f576b43 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 29 Jun 2022 10:32:13 +0800 Subject: [PATCH 1/4] Avoid recalculating html block styles in useSelect --- packages/block-library/src/html/edit.js | 38 ++++++++++++------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js index 064740b84e0dd..d29ad5d1ce3be 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 { useContext, useState } from '@wordpress/element'; +import { useContext, useMemo, useState } from '@wordpress/element'; import { BlockControls, PlainText, @@ -18,30 +18,30 @@ import { } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; +// Default styles used to unset some of the styles +// that might be inherited from the editor style. +const DEFAULT_STYLES = ` + html,body,:root { + margin: 0 !important; + padding: 0 !important; + overflow: visible !important; + min-height: auto !important; + } +`; + 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 - // that might be inherited from the editor style. - const defaultStyles = ` - html,body,:root { - margin: 0 !important; - padding: 0 !important; - overflow: visible !important; - min-height: auto !important; - } - `; - - return [ - defaultStyles, - ...transformStyles( - select( blockEditorStore ).getSettings().styles - ), - ]; + const settingStyles = useSelect( ( select ) => { + return select( blockEditorStore ).getSettings().styles; }, [] ); + const styles = useMemo( + () => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ], + [ settingStyles ] + ); + function switchToPreview() { setIsPreview( true ); } From cddc3fb2b5770a30d252a966a7005f01edba8ac3 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 29 Jun 2022 10:38:29 +0800 Subject: [PATCH 2/4] Add some safety --- packages/block-library/src/html/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js index d29ad5d1ce3be..f4231fa85cd02 100644 --- a/packages/block-library/src/html/edit.js +++ b/packages/block-library/src/html/edit.js @@ -34,7 +34,7 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) { const isDisabled = useContext( Disabled.Context ); const settingStyles = useSelect( ( select ) => { - return select( blockEditorStore ).getSettings().styles; + return select( blockEditorStore ).getSettings()?.styles; }, [] ); const styles = useMemo( From 0205c4ee70643729187e5b8e712e55dfa1a9ece7 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 29 Jun 2022 10:57:52 +0800 Subject: [PATCH 3/4] Optimize further by moving preview into a seperate component --- packages/block-library/src/html/edit.js | 50 +++++----------------- packages/block-library/src/html/preview.js | 47 ++++++++++++++++++++ 2 files changed, 57 insertions(+), 40 deletions(-) create mode 100644 packages/block-library/src/html/preview.js diff --git a/packages/block-library/src/html/edit.js b/packages/block-library/src/html/edit.js index f4231fa85cd02..5cb2b457633b1 100644 --- a/packages/block-library/src/html/edit.js +++ b/packages/block-library/src/html/edit.js @@ -2,46 +2,23 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useContext, useMemo, useState } from '@wordpress/element'; +import { useContext, useState } from '@wordpress/element'; import { BlockControls, PlainText, - transformStyles, useBlockProps, - store as blockEditorStore, } from '@wordpress/block-editor'; -import { - ToolbarButton, - Disabled, - SandBox, - ToolbarGroup, -} from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; +import { ToolbarButton, Disabled, ToolbarGroup } from '@wordpress/components'; -// Default styles used to unset some of the styles -// that might be inherited from the editor style. -const DEFAULT_STYLES = ` - html,body,:root { - margin: 0 !important; - padding: 0 !important; - overflow: visible !important; - min-height: auto !important; - } -`; +/** + * Internal dependencies + */ +import Preview from './preview'; export default function HTMLEdit( { attributes, setAttributes, isSelected } ) { const [ isPreview, setIsPreview ] = useState(); const isDisabled = useContext( Disabled.Context ); - const settingStyles = useSelect( ( select ) => { - return select( blockEditorStore ).getSettings()?.styles; - }, [] ); - - const styles = useMemo( - () => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ], - [ settingStyles ] - ); - function switchToPreview() { setIsPreview( true ); } @@ -71,17 +48,10 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) { { 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 && ( -
- ) } - + ) : ( { + return select( blockEditorStore ).getSettings()?.styles; + }, [] ); + + const styles = useMemo( + () => [ DEFAULT_STYLES, ...transformStyles( settingStyles ) ], + [ settingStyles ] + ); + + return ( + <> + <SandBox html={ 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> + ) } + </> + ); +} From f67dba2c835df72b80402017a51b4375e0147b2d Mon Sep 17 00:00:00 2001 From: Daniel Richards <daniel.richards@automattic.com> Date: Wed, 29 Jun 2022 13:35:05 +0800 Subject: [PATCH 4/4] Remove empty line --- packages/block-library/src/html/preview.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/html/preview.js b/packages/block-library/src/html/preview.js index f0b07f76a52dc..262f6ef626e0a 100644 --- a/packages/block-library/src/html/preview.js +++ b/packages/block-library/src/html/preview.js @@ -7,7 +7,6 @@ import { store as blockEditorStore, } from '@wordpress/block-editor'; import { SandBox } from '@wordpress/components'; - import { useSelect } from '@wordpress/data'; // Default styles used to unset some of the styles