Skip to content

adds default alt values in editing context #11218

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

Merged
aduth merged 11 commits into from
Nov 12, 2018
Merged

adds default alt values in editing context #11218

Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
338eb64
Squashing commits - default alt values editor
antpb Nov 5, 2018
a693e89
Merge branch 'master' into add-default-alt-values-to-images-in-editin…
antpb Nov 5, 2018
b1327b8
adds suggestions by @talldan review - THANKS!
antpb Nov 5, 2018
632d820
makes second group non-capturing
antpb Nov 6, 2018
918e0e6
adds back the re-enable of no-lonely-if
antpb Nov 6, 2018
d93e67e
removes url check as it will never be false when this function is used
antpb Nov 9, 2018
b04f8d4
Merge branch 'master' into add-default-alt-values-to-images-in-editin…
antpb Nov 12, 2018
f7798f4
changes defaultAlt logic
antpb Nov 12, 2018
4e81635
Merge branch 'add-default-alt-values-to-images-in-editing-context-#15…
antpb Nov 12, 2018
4582845
makes use of getPath and last to determine the file name
antpb Nov 12, 2018
b90b62c
removes extra function from merge conflict
antpb Nov 12, 2018
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
27 changes: 25 additions & 2 deletions packages/block-library/src/image/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,16 @@ import {
get,
isEmpty,
map,
last,
pick,
compact,
} from 'lodash';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { getPath } from '@wordpress/url';
import { __, sprintf } from '@wordpress/i18n';
import { Component, Fragment } from '@wordpress/element';
import { getBlobByURL, revokeBlobURL, isBlobURL } from '@wordpress/blob';
import {
Expand Down Expand Up @@ -98,6 +100,7 @@ class ImageEdit extends Component {
this.updateDimensions = this.updateDimensions.bind( this );
this.onSetCustomHref = this.onSetCustomHref.bind( this );
this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
this.getFilename = this.getFilename.bind( this );
this.toggleIsEditing = this.toggleIsEditing.bind( this );
this.onUploadError = this.onUploadError.bind( this );

Expand Down Expand Up @@ -254,6 +257,17 @@ class ImageEdit extends Component {
};
}

getFilename( url ) {
const path = getPath( url );
if ( path ) {
return last( path.split( '/' ) );
}
}

getImageSizes() {
return get( this.props.image, [ 'media_details', 'sizes' ], {} );
}

getLinkDestinationOptions() {
return [
{ value: LINK_DESTINATION_NONE, label: __( 'None' ) },
Expand Down Expand Up @@ -487,10 +501,19 @@ class ImageEdit extends Component {
imageHeight,
} = sizes;

const filename = this.getFilename( url );
let defaultedAlt;
if ( alt ) {
defaultedAlt = alt;
} else if ( filename ) {
defaultedAlt = sprintf( __( 'This image has an empty alt attribute; its file name is %s' ), filename );
} else {
defaultedAlt = __( 'This image has an empty alt attribute' );
}
// Disable reason: Image itself is not meant to be
// interactive, but should direct focus to block
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
const img = <img src={ url } alt={ alt } onClick={ this.onImageClick } />;
const img = <img src={ url } alt={ defaultedAlt } onClick={ this.onImageClick } />;

if ( ! isResizable || ! imageWidthWithinContainer ) {
return (
Expand Down