Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Format Library: Add alt edit field to inline image #64124

Merged
merged 7 commits into from
Jul 31, 2024
Merged

Format Library: Add alt edit field to inline image #64124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6332198
Format Library: Add alt edit field to inline image
t-hamano Jul 30, 2024
2566ffd
Merge branch 'trunk' into try/inline-image-alt
t-hamano Jul 31, 2024
cf66b8e
Remove redudant state
t-hamano Jul 31, 2024
bbc1112
Add help text
t-hamano Jul 31, 2024
7e17619
Tweak spacing value
t-hamano Jul 31, 2024
06be744
Use __next40pxDefaultSize
richtabor Jul 31, 2024
c2de352
Use 260px width
richtabor Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 54 additions & 15 deletions packages/format-library/src/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@ import {
SVG,
Popover,
Button,
__experimentalNumberControl as NumberControl,
ExternalLink,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
__experimentalNumberControl as NumberControl,
TextareaControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
Expand All @@ -17,7 +20,6 @@ import {
RichTextToolbarButton,
MediaUploadCheck,
} from '@wordpress/block-editor';
import { keyboardReturn } from '@wordpress/icons';

const ALLOWED_MEDIA_TYPES = [ 'image' ];

Expand All @@ -41,8 +43,11 @@ export const image = {
};

function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
const { style } = activeObjectAttributes;
const [ width, setWidth ] = useState( style?.replace( /\D/g, '' ) );
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,
Expand All @@ -64,7 +69,8 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
type: name,
attributes: {
...activeObjectAttributes,
style: width ? `width: ${ width }px;` : '',
style: width ? `width: ${ editedWidth }px;` : '',
alt: editedAlt,
},
};

Expand All @@ -76,21 +82,54 @@ function InlineUI( { value, onChange, activeObjectAttributes, contentRef } ) {
event.preventDefault();
} }
>
<HStack alignment="bottom">
<VStack spacing={ 4 }>
<NumberControl
__next40pxDefaultSize
label={ __( 'Width' ) }
value={ width }
value={ editedWidth }
min={ 1 }
onChange={ ( newWidth ) => setWidth( newWidth ) }
size="__unstable-large"
onChange={ ( newWidth ) => {
setEditedWidth( newWidth );
} }
/>
<Button
icon={ keyboardReturn }
label={ __( 'Apply' ) }
type="submit"
__next40pxDefaultSize
<TextareaControl
label={ __( 'Alternative text' ) }
__nextHasNoMarginBottom
value={ editedAlt }
onChange={ ( newAlt ) => {
setEditedAlt( newAlt );
} }
help={
<>
<ExternalLink
href={
// translators: Localized tutorial, if one exists. W3C Web Accessibility Initiative link has list of existing translations.
__(
'https://www.w3.org/WAI/tutorials/images/decision-tree/'
)
}
>
{ __(
'Describe the purpose of the image.'
) }
</ExternalLink>
<br />
{ __( 'Leave empty if decorative.' ) }
</>
}
/>
</HStack>
<HStack justify="right">
<Button
disabled={ ! hasChanged }
accessibleWhenDisabled
variant="primary"
type="submit"
size="compact"
>
{ __( 'Apply' ) }
</Button>
</HStack>
</VStack>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at this deeper, why do we even have an apply button here? The image block does not have this either, it just updates right away.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Even in trunk, it won't update unless you explicitly submit the form or press the apply icon button. If we update it immediately, I think the popover will rattle 😅

2b809508a0a1330326ffa2cbe00a3f7c.mp4

</form>
</Popover>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/format-library/src/image/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
z-index: z-index(".block-editor-format-toolbar__image-popover");

.block-editor-format-toolbar__image-container-content {
width: 200px;
width: 260px;
padding: $grid-unit-20;
}
}
9 changes: 6 additions & 3 deletions test/e2e/specs/editor/various/adding-inline-tokens.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ filename }\\.png" alt=""\\/?>`
`a <img class="wp-image-\\d+" style="width:\\s*20px;?" src="[^"]+\\/${ filename }\\.png" alt="Alt"\\/?>`
);

await expect.poll( editor.getBlocks ).toMatchObject( [
Expand Down
Loading