From 74575e7f423b9b0066439887827ee767db6a49f5 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 14 Feb 2024 14:53:28 +0800 Subject: [PATCH 1/4] Add content only controls for alt and title to image block toolbar --- packages/block-library/src/image/editor.scss | 5 ++ packages/block-library/src/image/image.js | 84 ++++++++++++++++++++ 2 files changed, 89 insertions(+) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index ded3768dfa7d38..d3fafcfcab4eca 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -181,3 +181,8 @@ figure.wp-block-image:not(.wp-block) { padding-right: 0; } } + +.wp-block-image__toolbar_content_textarea { + // Corresponds to the size of the textarea in the block inspector. + width: 250px; +} diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index f188f8eaaf3101..a59877a0a8f420 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -9,6 +9,7 @@ import { TextareaControl, TextControl, ToolbarButton, + ToolbarDropdownMenu, ToolbarGroup, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, @@ -177,6 +178,7 @@ export default function Image( { const [ externalBlob, setExternalBlob ] = useState(); const clientWidth = useClientWidth( containerRef, [ align ] ); const hasNonContentControls = blockEditingMode === 'default'; + const isContentOnlyMode = blockEditingMode === 'contentOnly'; const isResizable = allowResize && hasNonContentControls && @@ -514,6 +516,88 @@ export default function Image( { ) } + { isContentOnlyMode && ( + // Add some extra controls for content attributes when content only mode is active. + // With content only mode active, the inspector is hidden, so users need another way + // to edit these attributes. + + + { () => ( + + { __( + 'Connected to a custom field' + ) } + + ) : ( + <> + + { __( + 'Describe the purpose of the image.' + ) } + +
+ { __( + 'Leave empty if decorative.' + ) } + + ) + } + __nextHasNoMarginBottom + /> + ) } + + + { () => ( + + { __( + 'Connected to a custom field' + ) } + + ) : ( + <> + { __( + 'Describe the role of this image on the page.' + ) } + + { __( + '(Note: many devices and browsers do not display this text.)' + ) } + + + ) + } + /> + ) } + + + ) } Date: Wed, 14 Feb 2024 15:05:55 +0800 Subject: [PATCH 2/4] Switch to plain `Dropdown` component to ensure correct semantics inside popover --- packages/block-library/src/image/image.js | 56 +++++++++++++++++------ 1 file changed, 41 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index a59877a0a8f420..a90780221e4522 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -9,8 +9,8 @@ import { TextareaControl, TextControl, ToolbarButton, - ToolbarDropdownMenu, ToolbarGroup, + Dropdown, __experimentalToolsPanel as ToolsPanel, __experimentalToolsPanelItem as ToolsPanelItem, __experimentalUseCustomUnits as useCustomUnits, @@ -31,6 +31,7 @@ import { } from '@wordpress/block-editor'; import { useEffect, useMemo, useState, useRef } from '@wordpress/element'; import { __, _x, sprintf, isRTL } from '@wordpress/i18n'; +import { DOWN } from '@wordpress/keycodes'; import { getFilename } from '@wordpress/url'; import { switchToBlockType } from '@wordpress/blocks'; import { crop, overlayText, upload } from '@wordpress/icons'; @@ -521,13 +522,27 @@ export default function Image( { // With content only mode active, the inspector is hidden, so users need another way // to edit these attributes. - - { () => ( + renderToggle={ ( { isOpen, onToggle } ) => ( + { + if ( ! isOpen && event.keyCode === DOWN ) { + event.preventDefault(); + onToggle(); + } + } } + > + { _x( + 'Alt text', + 'Alternative text for an image' + ) } + + ) } + renderContent={ () => ( ) } - - + - { () => ( + renderToggle={ ( { isOpen, onToggle } ) => ( + { + if ( ! isOpen && event.keyCode === DOWN ) { + event.preventDefault(); + onToggle(); + } + } } + > + { __( 'Title' ) } + + ) } + renderContent={ () => ( ) } - + /> ) } From 2660a0cc3838f98c960cc3f932ad9317de8ccec3 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 14 Feb 2024 15:14:19 +0800 Subject: [PATCH 3/4] Iterate on copy and translator comment --- packages/block-library/src/image/image.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index a90780221e4522..46cc95b95f0794 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -537,8 +537,8 @@ export default function Image( { } } > { _x( - 'Alt text', - 'Alternative text for an image' + 'Alt. text', + 'Alternative text for an image. Block toolbar label, a low character count is preferred.' ) } ) } From 3d24de9ad3dac1d9d4881a1981fb8e8a9d0eb8e0 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 14 Feb 2024 15:18:15 +0800 Subject: [PATCH 4/4] Iterate again --- packages/block-library/src/image/image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index 46cc95b95f0794..c941f9cc741047 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -537,7 +537,7 @@ export default function Image( { } } > { _x( - 'Alt. text', + 'Alt', 'Alternative text for an image. Block toolbar label, a low character count is preferred.' ) }