From 8d2afd612e4d2915bedda08873d2a70b1f8ea80f Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 2 Feb 2023 13:09:29 +0800 Subject: [PATCH 1/6] Show a pointer/hint in the settings tab informing the user about the styles tab --- package-lock.json | 1 + packages/block-editor/package.json | 1 + .../settings-tab-pointer.js | 43 +++++++++++++++++++ .../inspector-controls-tabs/settings-tab.js | 2 + .../inspector-controls-tabs/style.scss | 19 ++++++++ 5 files changed, 66 insertions(+) create mode 100644 packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js diff --git a/package-lock.json b/package-lock.json index f914bfc45c8d3..948cb66dc1168 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17309,6 +17309,7 @@ "@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts", "@wordpress/keycodes": "file:packages/keycodes", "@wordpress/notices": "file:packages/notices", + "@wordpress/preferences": "file:packages/preferences", "@wordpress/rich-text": "file:packages/rich-text", "@wordpress/shortcode": "file:packages/shortcode", "@wordpress/style-engine": "file:packages/style-engine", diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index 4416bb686c9af..a160a757074c7 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -54,6 +54,7 @@ "@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts", "@wordpress/keycodes": "file:../keycodes", "@wordpress/notices": "file:../notices", + "@wordpress/preferences": "file:../preferences", "@wordpress/rich-text": "file:../rich-text", "@wordpress/shortcode": "file:../shortcode", "@wordpress/style-engine": "file:../style-engine", diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js new file mode 100644 index 0000000000000..77808da402752 --- /dev/null +++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js @@ -0,0 +1,43 @@ +/** + * WordPress dependencies + */ +import { Button } from '@wordpress/components'; +import { useDispatch, useSelect } from '@wordpress/data'; +import { __ } from '@wordpress/i18n'; +import { close } from '@wordpress/icons'; +import { store as preferencesStore } from '@wordpress/preferences'; + +const PREFERENCE_NAME = 'isInspectorControlsTabsPointerVisible'; + +export default function InspectorControlsTabsPointer() { + const isInspectorControlsTabsPointerVisible = useSelect( + ( select ) => + select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true, + [] + ); + + const { set: setPreference } = useDispatch( preferencesStore ); + if ( ! isInspectorControlsTabsPointerVisible ) { + return null; + } + + return ( +
+
+ { __( + "Looking for other block settings? They've moved to the styles tab." + ) } +
+
+ ); +} diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js index ec34035b754a9..2342e38e201a3 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab.js @@ -4,6 +4,7 @@ import AdvancedControls from './advanced-controls-panel'; import PositionControls from './position-controls-panel'; import { default as InspectorControls } from '../inspector-controls'; +import SettingsTabPointer from './settings-tab-pointer'; const SettingsTab = ( { showAdvancedControls = false } ) => ( <> @@ -14,6 +15,7 @@ const SettingsTab = ( { showAdvancedControls = false } ) => ( ) } + ); diff --git a/packages/block-editor/src/components/inspector-controls-tabs/style.scss b/packages/block-editor/src/components/inspector-controls-tabs/style.scss index f863f8f844d72..cc45ba5326885 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/style.scss +++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss @@ -13,3 +13,22 @@ } } } + +.block-editor-inspector-controls-tabs__pointer { + align-items: top; + background: $gray-100; + color: $gray-900; + display: flex; + flex-direction: row; + margin: $grid-unit-20; +} + +.block-editor-inspector-controls-tabs__pointer-content { + margin: $grid-unit-20 0 $grid-unit-20 $grid-unit-20; +} + +.block-editor-inspector-controls-tabs__pointer-dismiss { + // The dismiss button has a lot of empty space through its padding. + // Apply margin to visually align the icon with the top of the text to its left. + margin: $grid-unit-10 $grid-unit-10 $grid-unit-10 0; +} From e39c9b6c20601d197489efa013ce41e62bf4b919 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 2 Feb 2023 13:28:45 +0800 Subject: [PATCH 2/6] Add a spoken message when the notice is dismissed --- .../inspector-controls-tabs/settings-tab-pointer.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js index 77808da402752..51ebb931b23cb 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { speak } from '@wordpress/a11y'; import { Button } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -33,9 +34,10 @@ export default function InspectorControlsTabsPointer() { icon={ close } iconSize="16" label={ __( 'Dismiss' ) } - onClick={ () => - setPreference( 'core', PREFERENCE_NAME, false ) - } + onClick={ () => { + setPreference( 'core', PREFERENCE_NAME, false ); + speak( __( 'Notice dismissed.' ) ); + } } showTooltip={ false } /> From d87a44a92ea40f6032b9d5de3df1fec860699ee0 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 3 Feb 2023 13:28:21 +0800 Subject: [PATCH 3/6] Update margin around text and button --- .../src/components/inspector-controls-tabs/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inspector-controls-tabs/style.scss b/packages/block-editor/src/components/inspector-controls-tabs/style.scss index cc45ba5326885..7cc8beb25b1b2 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/style.scss +++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss @@ -17,6 +17,7 @@ .block-editor-inspector-controls-tabs__pointer { align-items: top; background: $gray-100; + border-radius: $radius-block-ui; color: $gray-900; display: flex; flex-direction: row; @@ -24,11 +25,11 @@ } .block-editor-inspector-controls-tabs__pointer-content { - margin: $grid-unit-20 0 $grid-unit-20 $grid-unit-20; + margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15; } .block-editor-inspector-controls-tabs__pointer-dismiss { // The dismiss button has a lot of empty space through its padding. // Apply margin to visually align the icon with the top of the text to its left. - margin: $grid-unit-10 $grid-unit-10 $grid-unit-10 0; + margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0; } From fe44096e2a36346255af24d66f20fbee606d94e8 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 3 Feb 2023 13:29:50 +0800 Subject: [PATCH 4/6] Remove spoken message --- .../components/inspector-controls-tabs/settings-tab-pointer.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js index 51ebb931b23cb..c2b09ca811f72 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { speak } from '@wordpress/a11y'; import { Button } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -36,7 +35,6 @@ export default function InspectorControlsTabsPointer() { label={ __( 'Dismiss' ) } onClick={ () => { setPreference( 'core', PREFERENCE_NAME, false ); - speak( __( 'Notice dismissed.' ) ); } } showTooltip={ false } /> From 6088f71ce4522bf1bc413a02f9a70ba5c70047ea Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 3 Feb 2023 13:47:23 +0800 Subject: [PATCH 5/6] Rename to hint and add focus management code --- ...gs-tab-pointer.js => settings-tab-hint.js} | 23 +++++++++++++------ .../inspector-controls-tabs/settings-tab.js | 4 ++-- .../inspector-controls-tabs/style.scss | 6 ++--- 3 files changed, 21 insertions(+), 12 deletions(-) rename packages/block-editor/src/components/inspector-controls-tabs/{settings-tab-pointer.js => settings-tab-hint.js} (52%) diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js similarity index 52% rename from packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js rename to packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js index c2b09ca811f72..5b4898f8dd280 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-pointer.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js @@ -3,37 +3,46 @@ */ import { Button } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; +import { focus } from '@wordpress/dom'; +import { useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { close } from '@wordpress/icons'; import { store as preferencesStore } from '@wordpress/preferences'; -const PREFERENCE_NAME = 'isInspectorControlsTabsPointerVisible'; +const PREFERENCE_NAME = 'isInspectorControlsTabsHintVisible'; -export default function InspectorControlsTabsPointer() { - const isInspectorControlsTabsPointerVisible = useSelect( +export default function InspectorControlsTabsHint() { + const isInspectorControlsTabsHintVisible = useSelect( ( select ) => select( preferencesStore ).get( 'core', PREFERENCE_NAME ) ?? true, [] ); + const ref = useRef(); + const { set: setPreference } = useDispatch( preferencesStore ); - if ( ! isInspectorControlsTabsPointerVisible ) { + if ( ! isInspectorControlsTabsHintVisible ) { return null; } return ( -
-
+
+
{ __( "Looking for other block settings? They've moved to the styles tab." ) }
) } - + ); diff --git a/packages/block-editor/src/components/inspector-controls-tabs/style.scss b/packages/block-editor/src/components/inspector-controls-tabs/style.scss index 7cc8beb25b1b2..da83073a45590 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/style.scss +++ b/packages/block-editor/src/components/inspector-controls-tabs/style.scss @@ -14,7 +14,7 @@ } } -.block-editor-inspector-controls-tabs__pointer { +.block-editor-inspector-controls-tabs__hint { align-items: top; background: $gray-100; border-radius: $radius-block-ui; @@ -24,11 +24,11 @@ margin: $grid-unit-20; } -.block-editor-inspector-controls-tabs__pointer-content { +.block-editor-inspector-controls-tabs__hint-content { margin: $grid-unit-15 0 $grid-unit-15 $grid-unit-15; } -.block-editor-inspector-controls-tabs__pointer-dismiss { +.block-editor-inspector-controls-tabs__hint-dismiss { // The dismiss button has a lot of empty space through its padding. // Apply margin to visually align the icon with the top of the text to its left. margin: $grid-unit-05 $grid-unit-05 $grid-unit-05 0; From 6f5fc3825890c3decdac144c3e5b27ea2824f42e Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 3 Feb 2023 13:50:45 +0800 Subject: [PATCH 6/6] Relabel dismiss button --- .../src/components/inspector-controls-tabs/settings-tab-hint.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js index 5b4898f8dd280..4fc829817b4e0 100644 --- a/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js +++ b/packages/block-editor/src/components/inspector-controls-tabs/settings-tab-hint.js @@ -36,7 +36,7 @@ export default function InspectorControlsTabsHint() { className="block-editor-inspector-controls-tabs__hint-dismiss" icon={ close } iconSize="16" - label={ __( 'Dismiss' ) } + label={ __( 'Dismiss hint' ) } onClick={ () => { // Retain focus when dismissing the element. const previousElement = focus.tabbable.findPrevious(