From 6332198f71d06f7b03d7ab937957c4a14d48feba Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Tue, 30 Jul 2024 19:15:05 +0900 Subject: [PATCH 1/6] Format Library: Add alt edit field to inline image --- packages/format-library/src/image/index.js | 47 ++++++++++++++----- packages/format-library/src/image/style.scss | 2 +- .../various/adding-inline-tokens.spec.js | 9 ++-- 3 files changed, 42 insertions(+), 16 deletions(-) diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js index 794af776c88e7..3ce200d911c3a 100644 --- a/packages/format-library/src/image/index.js +++ b/packages/format-library/src/image/index.js @@ -6,8 +6,10 @@ import { SVG, Popover, Button, - __experimentalNumberControl as NumberControl, __experimentalHStack as HStack, + __experimentalVStack as VStack, + __experimentalNumberControl as NumberControl, + TextareaControl, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { useState } from '@wordpress/element'; @@ -17,7 +19,6 @@ import { RichTextToolbarButton, MediaUploadCheck, } from '@wordpress/block-editor'; -import { keyboardReturn } from '@wordpress/icons'; const ALLOWED_MEDIA_TYPES = [ 'image' ]; @@ -41,8 +42,10 @@ export const image = { }; function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { - const { style } = activeObjectAttributes; + const { style, alt: _alt } = activeObjectAttributes; const [ width, setWidth ] = useState( style?.replace( /\D/g, '' ) ); + const [ alt, setAlt ] = useState( _alt ); + const [ hasChanged, setHasChanged ] = useState( false ); const popoverAnchor = useAnchor( { editableContentElement: contentRef.current, settings: image, @@ -65,6 +68,7 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { attributes: { ...activeObjectAttributes, style: width ? `width: ${ width }px;` : '', + alt, }, }; @@ -73,24 +77,43 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { replacements: newReplacements, } ); + setHasChanged( false ); + event.preventDefault(); } } > - + setWidth( newWidth ) } - size="__unstable-large" + onChange={ ( newWidth ) => { + setWidth( newWidth ); + setHasChanged( true ); + } } + size="compact" /> - + + ); diff --git a/packages/format-library/src/image/style.scss b/packages/format-library/src/image/style.scss index 7e9809e52f3bf..fd5dfc062deff 100644 --- a/packages/format-library/src/image/style.scss +++ b/packages/format-library/src/image/style.scss @@ -2,7 +2,7 @@ z-index: z-index(".block-editor-format-toolbar__image-popover"); .block-editor-format-toolbar__image-container-content { - width: 200px; + width: 240px; padding: $grid-unit-20; } } diff --git a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js index 15f9d9ea87732..c7826ebf26282 100644 --- a/test/e2e/specs/editor/various/adding-inline-tokens.spec.js +++ b/test/e2e/specs/editor/various/adding-inline-tokens.spec.js @@ -64,13 +64,16 @@ test.describe( 'adding inline tokens', () => { await pageUtils.pressKeys( 'shift+ArrowLeft' ); await page.keyboard.press( 'Tab' ); - await page.keyboard.press( 'Tab' ); - await page.fill( 'role=spinbutton[name="WIDTH"i]', '20' ); + await expect( + page.locator( 'role=spinbutton[name="Width"i]' ) + ).toBeFocused(); + await page.fill( 'role=spinbutton[name="Width"i]', '20' ); + await page.fill( 'role=textbox[name="Alternative text"i]', 'Alt' ); await page.click( 'role=button[name="Apply"i]' ); // Check the content. const contentRegex2 = new RegExp( - `a ` + `a Alt` ); await expect.poll( editor.getBlocks ).toMatchObject( [ From cf66b8e9383776dc54d44bfab858dcca61843bff Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Wed, 31 Jul 2024 18:18:41 +0900 Subject: [PATCH 2/6] Remove redudant state --- packages/format-library/src/image/index.js | 25 ++++++++++------------ 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js index 3ce200d911c3a..d66e8ee40bdb1 100644 --- a/packages/format-library/src/image/index.js +++ b/packages/format-library/src/image/index.js @@ -42,10 +42,11 @@ export const image = { }; function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { - const { style, alt: _alt } = activeObjectAttributes; - const [ width, setWidth ] = useState( style?.replace( /\D/g, '' ) ); - const [ alt, setAlt ] = useState( _alt ); - const [ hasChanged, setHasChanged ] = useState( false ); + const { style, alt } = activeObjectAttributes; + const width = style?.replace( /\D/g, '' ); + const [ editedWidth, setEditedWidth ] = useState( width ); + const [ editedAlt, setEditedAlt ] = useState( alt ); + const hasChanged = editedWidth !== width || editedAlt !== alt; const popoverAnchor = useAnchor( { editableContentElement: contentRef.current, settings: image, @@ -67,8 +68,8 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { type: name, attributes: { ...activeObjectAttributes, - style: width ? `width: ${ width }px;` : '', - alt, + style: width ? `width: ${ editedWidth }px;` : '', + alt: editedAlt, }, }; @@ -77,29 +78,25 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { replacements: newReplacements, } ); - setHasChanged( false ); - event.preventDefault(); } } > { - setWidth( newWidth ); - setHasChanged( true ); + setEditedWidth( newWidth ); } } size="compact" /> { - setAlt( newAlt ); - setHasChanged( true ); + setEditedAlt( newAlt ); } } /> From bbc11123b92fead282b8f5336f346c94d7093738 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Wed, 31 Jul 2024 18:20:07 +0900 Subject: [PATCH 3/6] Add help text --- packages/format-library/src/image/index.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/packages/format-library/src/image/index.js b/packages/format-library/src/image/index.js index d66e8ee40bdb1..e972cc0d04a94 100644 --- a/packages/format-library/src/image/index.js +++ b/packages/format-library/src/image/index.js @@ -6,6 +6,7 @@ import { SVG, Popover, Button, + ExternalLink, __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalNumberControl as NumberControl, @@ -98,6 +99,24 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) { onChange={ ( newAlt ) => { setEditedAlt( newAlt ); } } + help={ + <> + + { __( + 'Describe the purpose of the image.' + ) } + +
+ { __( 'Leave empty if decorative.' ) } + + } />