From 9b2aaa8a555018cd992679c71c22fd62fe089c92 Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Tue, 18 Jul 2023 09:16:57 -0700 Subject: [PATCH 1/8] Settings: Show message when Visual or Code editor are disabled --- .../components/header/mode-switcher/index.js | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/packages/edit-post/src/components/header/mode-switcher/index.js index 2b5344d930048a..4d4098e7bdee84 100644 --- a/packages/edit-post/src/components/header/mode-switcher/index.js +++ b/packages/edit-post/src/components/header/mode-switcher/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { MenuItemsChoice, MenuGroup } from '@wordpress/components'; +import { MenuItemsChoice, MenuGroup, Notice } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; import { store as editorStore } from '@wordpress/editor'; @@ -55,8 +55,24 @@ function ModeSwitcher() { return null; } - if ( ! isRichEditingEnabled || ! isCodeEditingEnabled ) { - return null; + if ( ! isRichEditingEnabled ) { + return ( + + + { __( 'Visual editor is disabled.' ) } + + + ); + } + + if ( ! isCodeEditingEnabled ) { + return ( + + + { __( 'Code editor is disabled.' ) } + + + ); } const choices = MODES.map( ( choice ) => { From 3176fbd99ea9f76b5804116ac2de01256d567a11 Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Mon, 24 Jul 2023 09:03:58 -0700 Subject: [PATCH 2/8] Use disabled menu items instead of a `` --- .../src/menu-items-choice/index.tsx | 1 + .../components/src/menu-items-choice/types.ts | 4 ++ .../components/header/mode-switcher/index.js | 44 ++++++++++--------- 3 files changed, 29 insertions(+), 20 deletions(-) diff --git a/packages/components/src/menu-items-choice/index.tsx b/packages/components/src/menu-items-choice/index.tsx index 171e5fae72a60f..f909dceda22e9d 100644 --- a/packages/components/src/menu-items-choice/index.tsx +++ b/packages/components/src/menu-items-choice/index.tsx @@ -58,6 +58,7 @@ function MenuItemsChoice( { - - { __( 'Visual editor is disabled.' ) } - - - ); + let selectedMode = mode; + if ( ! isRichEditingEnabled && mode === 'visual' ) { + selectedMode = 'text'; } - - if ( ! isCodeEditingEnabled ) { - return ( - - - { __( 'Code editor is disabled.' ) } - - - ); + if ( ! isCodeEditingEnabled && mode === 'text' ) { + selectedMode = 'visual'; } const choices = MODES.map( ( choice ) => { - if ( choice.value !== mode ) { + if ( ! isCodeEditingEnabled && choice.value === 'text' ) { + choice = { + ...choice, + disabled: true, + info: __( 'Code editor is disabled for this site.' ), + }; + } + if ( ! isRichEditingEnabled && choice.value === 'visual' ) { + choice = { + ...choice, + disabled: true, + info: __( + 'Enable the visual editor in your profile settings.' + ), + }; + } + if ( choice.value !== selectedMode && ! choice.disabled ) { return { ...choice, shortcut }; } return choice; @@ -86,7 +90,7 @@ function ModeSwitcher() { From 6ae7a4edfbbe5014b3ec710e2097e01eb4772efd Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Thu, 27 Jul 2023 04:37:44 -0700 Subject: [PATCH 3/8] Softer language Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> --- packages/edit-post/src/components/header/mode-switcher/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/packages/edit-post/src/components/header/mode-switcher/index.js index 93823b9e89b680..1bfb065e6ce07a 100644 --- a/packages/edit-post/src/components/header/mode-switcher/index.js +++ b/packages/edit-post/src/components/header/mode-switcher/index.js @@ -76,7 +76,7 @@ function ModeSwitcher() { ...choice, disabled: true, info: __( - 'Enable the visual editor in your profile settings.' + 'You can enable the visual editor in your profile settings.' ), }; } From 815e989760961130001300b8c97e3c64edfabb75 Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Fri, 28 Jul 2023 07:50:55 -0700 Subject: [PATCH 4/8] Better description Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> --- packages/components/src/menu-items-choice/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/menu-items-choice/types.ts b/packages/components/src/menu-items-choice/types.ts index 6b91a3e8e88ba2..fe3de75ed1424f 100644 --- a/packages/components/src/menu-items-choice/types.ts +++ b/packages/components/src/menu-items-choice/types.ts @@ -39,7 +39,7 @@ export type MenuItemChoice = { */ value: string; /** - * Unique value for choice. + * Whether the menu item is disabled. */ disabled?: boolean; /** From eee6284b93fed270a20e9e6d7b5383dc0f2c58b6 Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Fri, 28 Jul 2023 07:54:05 -0700 Subject: [PATCH 5/8] Import `disabled` prop --- packages/components/src/menu-items-choice/types.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/menu-items-choice/types.ts b/packages/components/src/menu-items-choice/types.ts index fe3de75ed1424f..87d8e7687a4fbd 100644 --- a/packages/components/src/menu-items-choice/types.ts +++ b/packages/components/src/menu-items-choice/types.ts @@ -2,6 +2,7 @@ * Internal dependencies */ import type { ShortcutProps } from '../shortcut/types'; +import type { ButtonAsButtonProps } from '../button/types'; export type MenuItemsChoiceProps = { /** @@ -41,7 +42,7 @@ export type MenuItemChoice = { /** * Whether the menu item is disabled. */ - disabled?: boolean; + disabled?: ButtonAsButtonProps[ 'disabled' ]; /** * Additional information which will be rendered below the given label. */ From 7cddb1761545443e6ea5a9ec9c2f2b6392e2e6cc Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Fri, 28 Jul 2023 07:58:12 -0700 Subject: [PATCH 6/8] Mention `disabled` in `menu-item/README.md` --- packages/components/src/menu-item/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/components/src/menu-item/README.md b/packages/components/src/menu-item/README.md index 68affcd63b8bfd..8532e54d4132da 100644 --- a/packages/components/src/menu-item/README.md +++ b/packages/components/src/menu-item/README.md @@ -34,6 +34,13 @@ MenuItem supports the following props. Any additional props are passed through t Element to render as child of button. +### `disabled` + +- Type: `boolean` +- Required: No + +Refer to documentation for [Button's `disabled` prop](/packages/components/src/button/README.md#disabled-boolean). + ### `info` - Type: `string` From 6e2744c005352693fbd7cc3a0b8b840e8729761c Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Fri, 28 Jul 2023 08:03:13 -0700 Subject: [PATCH 7/8] Add a changelog entry --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index c903989f456288..2cfc0c1f5caeba 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Enhancements - `ColorPalette`, `BorderControl`: Don't hyphenate hex value in `aria-label` ([#52932](https://github.com/WordPress/gutenberg/pull/52932)). +- `MenuItemsChoice`, `MenuItem`: Support a `disabled` prop on a menu item ([#52737](https://github.com/WordPress/gutenberg/pull/52737)). ### Bug Fix From 8214f40b65a4a1eb8c60fd370b686bb2a503d311 Mon Sep 17 00:00:00 2001 From: Daniel Bachhuber Date: Mon, 31 Jul 2023 07:25:29 -0700 Subject: [PATCH 8/8] Remove superfluous message --- packages/edit-post/src/components/header/mode-switcher/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/edit-post/src/components/header/mode-switcher/index.js b/packages/edit-post/src/components/header/mode-switcher/index.js index 1bfb065e6ce07a..b8d7f912180b60 100644 --- a/packages/edit-post/src/components/header/mode-switcher/index.js +++ b/packages/edit-post/src/components/header/mode-switcher/index.js @@ -68,7 +68,6 @@ function ModeSwitcher() { choice = { ...choice, disabled: true, - info: __( 'Code editor is disabled for this site.' ), }; } if ( ! isRichEditingEnabled && choice.value === 'visual' ) {