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

Add "Image Title Attribute" as an editable attribute on the image block #11070

Merged
merged 4 commits into from
Nov 1, 2019
Merged

Add "Image Title Attribute" as an editable attribute on the image block #11070

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5cefc77
Add a title to the image block advanced settings
brentswisher Apr 22, 2019
5e82610
Update help text on image title attribute to link to w3.org title des…
brentswisher Sep 11, 2019
4fef04a
Uopdate title attribute help text to not all be a link
brentswisher Sep 11, 2019
7c8d9c3
Remove line break in title attribute helper text
brentswisher Sep 27, 2019
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
6 changes: 6 additions & 0 deletions packages/block-library/src/image/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@
"source": "html",
"selector": "figcaption"
},
"title": {
"type": "string",
"source": "attribute",
"selector": "img",
"attribute": "title"
},
"href": {
"type": "string",
"source": "attribute",
Expand Down
170 changes: 98 additions & 72 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 @@ -51,6 +51,7 @@ import {
BlockControls,
BlockIcon,
InspectorControls,
InspectorAdvancedControls,
MediaPlaceholder,
URLPopover,
RichText,
Expand Down Expand Up @@ -281,6 +282,7 @@ export class ImageEdit extends Component {
this.onSetLinkClass = this.onSetLinkClass.bind( this );
this.onSetLinkRel = this.onSetLinkRel.bind( this );
this.onSetNewTab = this.onSetNewTab.bind( this );
this.onSetTitle = this.onSetTitle.bind( this );
this.getFilename = this.getFilename.bind( this );
this.toggleIsEditing = this.toggleIsEditing.bind( this );
this.onUploadError = this.onUploadError.bind( this );
Expand Down Expand Up @@ -350,6 +352,7 @@ export class ImageEdit extends Component {
url: undefined,
alt: undefined,
id: undefined,
title: undefined,
caption: undefined,
} );
return;
Expand Down Expand Up @@ -444,6 +447,11 @@ export class ImageEdit extends Component {
this.props.setAttributes( { href: value } );
}

onSetTitle( value ) {
// This is the HTML title attribute, separate from the media object title
this.props.setAttributes( { title: value } );
}

onSetLinkClass( value ) {
this.props.setAttributes( { linkClass: value } );
}
Expand Down Expand Up @@ -579,6 +587,7 @@ export class ImageEdit extends Component {
rel,
linkClass,
linkDestination,
title,
width,
height,
linkTarget,
Expand Down Expand Up @@ -689,84 +698,101 @@ export class ImageEdit extends Component {
const imageSizeOptions = this.getImageSizeOptions();

const getInspectorControls = ( imageWidth, imageHeight ) => (
<InspectorControls>
<PanelBody title={ __( 'Image Settings' ) }>
<TextareaControl
label={ __( 'Alt Text (Alternative Text)' ) }
value={ alt }
onChange={ this.updateAlt }
<>
<InspectorControls>
<PanelBody title={ __( 'Image Settings' ) }>
<TextareaControl
label={ __( 'Alt Text (Alternative Text)' ) }
value={ alt }
onChange={ this.updateAlt }
help={
<>
<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
{ __( 'Describe the purpose of the image' ) }
</ExternalLink>
{ __( 'Leave empty if the image is purely decorative.' ) }
</>
}
/>
{ ! isEmpty( imageSizeOptions ) && (
<SelectControl
label={ __( 'Image Size' ) }
value={ sizeSlug }
options={ imageSizeOptions }
onChange={ this.updateImage }
/>
) }
{ isResizable && (
<div className="block-library-image__dimensions">
<p className="block-library-image__dimensions__row">
{ __( 'Image Dimensions' ) }
</p>
<div className="block-library-image__dimensions__row">
<TextControl
type="number"
className="block-library-image__dimensions__width"
label={ __( 'Width' ) }
value={ width || imageWidth || '' }
min={ 1 }
onChange={ this.updateWidth }
/>
<TextControl
type="number"
className="block-library-image__dimensions__height"
label={ __( 'Height' ) }
value={ height || imageHeight || '' }
min={ 1 }
tellthemachines marked this conversation as resolved.
Show resolved Hide resolved
onChange={ this.updateHeight }
/>
</div>
<div className="block-library-image__dimensions__row">
<ButtonGroup aria-label={ __( 'Image Size' ) }>
{ [ 25, 50, 75, 100 ].map( ( scale ) => {
const scaledWidth = Math.round( imageWidth * ( scale / 100 ) );
const scaledHeight = Math.round( imageHeight * ( scale / 100 ) );

const isCurrent = width === scaledWidth && height === scaledHeight;

return (
<Button
key={ scale }
isSmall
isPrimary={ isCurrent }
aria-pressed={ isCurrent }
onClick={ this.updateDimensions( scaledWidth, scaledHeight ) }
>
{ scale }%
</Button>
);
} ) }
</ButtonGroup>
<Button
isSmall
onClick={ this.updateDimensions() }
>
{ __( 'Reset' ) }
</Button>
</div>
</div>
) }
</PanelBody>
</InspectorControls>
<InspectorAdvancedControls>
<TextControl
label={ __( 'Title Attribute' ) }
value={ title || '' }
onChange={ this.onSetTitle }
help={
<>
<ExternalLink href="https://www.w3.org/WAI/tutorials/images/decision-tree">
{ __( 'Describe the purpose of the image' ) }
{ __( 'Describe the role of this image on the page.' ) }
<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
{ __( '(Note: many devices and browsers do not display this text.)' ) }
</ExternalLink>
{ __( 'Leave empty if the image is purely decorative.' ) }
</>
}
/>
{ ! isEmpty( imageSizeOptions ) && (
<SelectControl
label={ __( 'Image Size' ) }
value={ sizeSlug }
options={ imageSizeOptions }
onChange={ this.updateImage }
/>
) }
{ isResizable && (
<div className="block-library-image__dimensions">
<p className="block-library-image__dimensions__row">
{ __( 'Image Dimensions' ) }
</p>
<div className="block-library-image__dimensions__row">
<TextControl
type="number"
className="block-library-image__dimensions__width"
label={ __( 'Width' ) }
value={ width || imageWidth || '' }
min={ 1 }
onChange={ this.updateWidth }
/>
<TextControl
type="number"
className="block-library-image__dimensions__height"
label={ __( 'Height' ) }
value={ height || imageHeight || '' }
min={ 1 }
onChange={ this.updateHeight }
/>
</div>
<div className="block-library-image__dimensions__row">
<ButtonGroup aria-label={ __( 'Image Size' ) }>
{ [ 25, 50, 75, 100 ].map( ( scale ) => {
const scaledWidth = Math.round( imageWidth * ( scale / 100 ) );
const scaledHeight = Math.round( imageHeight * ( scale / 100 ) );

const isCurrent = width === scaledWidth && height === scaledHeight;

return (
<Button
key={ scale }
isSmall
isPrimary={ isCurrent }
aria-pressed={ isCurrent }
onClick={ this.updateDimensions( scaledWidth, scaledHeight ) }
>
{ scale }%
</Button>
);
} ) }
</ButtonGroup>
<Button
isSmall
onClick={ this.updateDimensions() }
>
{ __( 'Reset' ) }
</Button>
</div>
</div>
) }
</PanelBody>
</InspectorControls>
</InspectorAdvancedControls>
</>
);

// Disable reason: Each block can be selected by clicking on it
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/image/save.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export default function save( { attributes } ) {
id,
linkTarget,
sizeSlug,
title,
} = attributes;

const newRel = isEmpty( rel ) ? undefined : rel;
Expand All @@ -40,6 +41,7 @@ export default function save( { attributes } ) {
className={ id ? `wp-image-${ id }` : null }
width={ width }
height={ height }
title={ title }
/>
);

Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/image/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function getFirstAnchorAttributeFormHTML( html, attributeName ) {

const imageSchema = {
img: {
attributes: [ 'src', 'alt' ],
attributes: [ 'src', 'alt', 'title' ],
classes: [ 'alignleft', 'aligncenter', 'alignright', 'alignnone', /^wp-image-\d+$/ ],
},
};
Expand Down