From 25b32d00351ca71324c29ac03a58f973c7a7bfee Mon Sep 17 00:00:00 2001 From: adambasa-dp Date: Thu, 2 Jun 2022 16:37:10 +0100 Subject: [PATCH 1/7] #30930 - Make it easier to select "Edit visually" when in "Edit as HTML" mode --- .../block-visually-convert-button.js | 56 +++++++++++++++++++ .../components/block-settings-menu/index.js | 2 + 2 files changed, 58 insertions(+) create mode 100644 packages/block-editor/src/components/block-settings-menu/block-visually-convert-button.js diff --git a/packages/block-editor/src/components/block-settings-menu/block-visually-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-visually-convert-button.js new file mode 100644 index 0000000000000..46e17c640d4be --- /dev/null +++ b/packages/block-editor/src/components/block-settings-menu/block-visually-convert-button.js @@ -0,0 +1,56 @@ +/** + * WordPress dependencies + */ +import { rawHandler, getBlockContent } from '@wordpress/blocks'; +import { ToolbarButton } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { useSelect, useDispatch } from '@wordpress/data'; +import { useCallback } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; + +export default function BlockVisuallyConvertButton( { clientIds, ...props } ) { + const { block, shouldRender } = useSelect( + ( select ) => { + const firstBlockClientId = clientIds[ 0 ]; + const { isBlockMultiSelected, getBlockMode, getBlock } = select( + blockEditorStore + ); + const isSingleSelected = ! isBlockMultiSelected( + firstBlockClientId + ); + const isHtmlMode = getBlockMode( firstBlockClientId ) === 'html'; + + return { + block: getBlock( firstBlockClientId ), + shouldRender: isSingleSelected && isHtmlMode, + }; + }, + [ clientIds[ 0 ] ] + ); + + const { replaceBlocks } = useDispatch( blockEditorStore ); + const onClick = useCallback( () => { + replaceBlocks( + block.clientId, + rawHandler( { HTML: getBlockContent( block ) } ) + ); + }, [ block ] ); + + if ( ! shouldRender ) { + return null; + } + + return ( + + { __( 'Edit visually' ) } + + ); +} diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index 0b0b1a775e736..04ab2be350b0d 100644 --- a/packages/block-editor/src/components/block-settings-menu/index.js +++ b/packages/block-editor/src/components/block-settings-menu/index.js @@ -7,6 +7,7 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components'; * Internal dependencies */ import BlockSettingsDropdown from './block-settings-dropdown'; +import BlockVisuallyConvertButton from './block-visually-convert-button'; export function BlockSettingsMenu( { clientIds, ...props } ) { return ( @@ -20,6 +21,7 @@ export function BlockSettingsMenu( { clientIds, ...props } ) { /> ) } + ); } From b2584afd8bda90d993f134bb724a537b110b1b70 Mon Sep 17 00:00:00 2001 From: adambasa-dp Date: Fri, 3 Jun 2022 15:08:49 +0100 Subject: [PATCH 2/7] BlockVisuallyConvertButton name converted to BlockEditVisuallyButton --- ...sually-convert-button.js => block-edit-visually-button.js} | 2 +- .../block-editor/src/components/block-settings-menu/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) rename packages/block-editor/src/components/block-settings-menu/{block-visually-convert-button.js => block-edit-visually-button.js} (94%) diff --git a/packages/block-editor/src/components/block-settings-menu/block-visually-convert-button.js b/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js similarity index 94% rename from packages/block-editor/src/components/block-settings-menu/block-visually-convert-button.js rename to packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js index 46e17c640d4be..fd4d97f11f5df 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-visually-convert-button.js +++ b/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js @@ -12,7 +12,7 @@ import { useCallback } from '@wordpress/element'; */ import { store as blockEditorStore } from '../../store'; -export default function BlockVisuallyConvertButton( { clientIds, ...props } ) { +export default function BlockEditVisuallyButton( { clientIds, ...props } ) { const { block, shouldRender } = useSelect( ( select ) => { const firstBlockClientId = clientIds[ 0 ]; diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index 04ab2be350b0d..5e1501de9d43e 100644 --- a/packages/block-editor/src/components/block-settings-menu/index.js +++ b/packages/block-editor/src/components/block-settings-menu/index.js @@ -7,7 +7,7 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components'; * Internal dependencies */ import BlockSettingsDropdown from './block-settings-dropdown'; -import BlockVisuallyConvertButton from './block-visually-convert-button'; +import BlockEditVisuallyButton from './block-edit-visually-button'; export function BlockSettingsMenu( { clientIds, ...props } ) { return ( @@ -21,7 +21,7 @@ export function BlockSettingsMenu( { clientIds, ...props } ) { /> ) } - + ); } From 81338e51f4c217f56ef47accfc09f3ba784bd04d Mon Sep 17 00:00:00 2001 From: adambasa-dp Date: Mon, 6 Jun 2022 10:17:36 +0100 Subject: [PATCH 3/7] title removed from the component --- .../components/block-settings-menu/block-edit-visually-button.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js b/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js index fd4d97f11f5df..e03d7bc49a879 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js +++ b/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js @@ -46,7 +46,6 @@ export default function BlockEditVisuallyButton( { clientIds, ...props } ) { return ( From b450d4cfa80b2865d577281a49c42818d3a76b69 Mon Sep 17 00:00:00 2001 From: adambasa-dp Date: Mon, 6 Jun 2022 10:29:01 +0100 Subject: [PATCH 4/7] code formatting fix --- .../block-settings-menu/block-edit-visually-button.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js b/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js index e03d7bc49a879..653108b350312 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js +++ b/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js @@ -45,10 +45,7 @@ export default function BlockEditVisuallyButton( { clientIds, ...props } ) { } return ( - + { __( 'Edit visually' ) } ); From 906b6947c6021b007ebc6c84c355201fe2c9c916 Mon Sep 17 00:00:00 2001 From: adambasa-dp Date: Tue, 14 Jun 2022 12:32:58 +0200 Subject: [PATCH 5/7] Reversed buttons order --- .../block-editor/src/components/block-settings-menu/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index 5e1501de9d43e..a328dddef8f99 100644 --- a/packages/block-editor/src/components/block-settings-menu/index.js +++ b/packages/block-editor/src/components/block-settings-menu/index.js @@ -12,6 +12,7 @@ import BlockEditVisuallyButton from './block-edit-visually-button'; export function BlockSettingsMenu( { clientIds, ...props } ) { return ( + { ( toggleProps ) => ( ) } - ); } From 7d0b5b6c11c67ccef2c8af86b2a18b741a20d6d8 Mon Sep 17 00:00:00 2001 From: adambasa-dp Date: Mon, 20 Jun 2022 17:20:12 +0200 Subject: [PATCH 6/7] divider between the button and the ellipsis --- .../block-edit-visually-button.js | 10 ++++---- .../components/block-settings-menu/index.js | 24 ++++++++++--------- 2 files changed, 19 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js b/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js index 653108b350312..dc294591e0dd8 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js +++ b/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { rawHandler, getBlockContent } from '@wordpress/blocks'; -import { ToolbarButton } from '@wordpress/components'; +import { ToolbarButton, ToolbarGroup } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { useCallback } from '@wordpress/element'; @@ -45,8 +45,10 @@ export default function BlockEditVisuallyButton( { clientIds, ...props } ) { } return ( - - { __( 'Edit visually' ) } - + + + { __( 'Edit visually' ) } + + ); } diff --git a/packages/block-editor/src/components/block-settings-menu/index.js b/packages/block-editor/src/components/block-settings-menu/index.js index a328dddef8f99..1b3f5fe0aa349 100644 --- a/packages/block-editor/src/components/block-settings-menu/index.js +++ b/packages/block-editor/src/components/block-settings-menu/index.js @@ -11,18 +11,20 @@ import BlockEditVisuallyButton from './block-edit-visually-button'; export function BlockSettingsMenu( { clientIds, ...props } ) { return ( - + <> - - { ( toggleProps ) => ( - - ) } - - + + + { ( toggleProps ) => ( + + ) } + + + ); } From 2b2540cf7ffa00bb32310cd8367e0138434ed6bd Mon Sep 17 00:00:00 2001 From: Adam Zielinski Date: Tue, 21 Jun 2022 10:14:36 +0200 Subject: [PATCH 7/7] Update packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js Co-authored-by: Zebulan Stanphill --- .../block-settings-menu/block-edit-visually-button.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js b/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js index dc294591e0dd8..87b28cb2ae26f 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js +++ b/packages/block-editor/src/components/block-settings-menu/block-edit-visually-button.js @@ -16,12 +16,10 @@ export default function BlockEditVisuallyButton( { clientIds, ...props } ) { const { block, shouldRender } = useSelect( ( select ) => { const firstBlockClientId = clientIds[ 0 ]; - const { isBlockMultiSelected, getBlockMode, getBlock } = select( - blockEditorStore - ); - const isSingleSelected = ! isBlockMultiSelected( - firstBlockClientId - ); + const { isBlockMultiSelected, getBlockMode, getBlock } = + select( blockEditorStore ); + const isSingleSelected = + ! isBlockMultiSelected( firstBlockClientId ); const isHtmlMode = getBlockMode( firstBlockClientId ) === 'html'; return {