From 5cefc7708173ed218bc36aacfc4504cf60aff338 Mon Sep 17 00:00:00 2001 From: Brent Swisher Date: Mon, 22 Apr 2019 16:54:27 -0400 Subject: [PATCH 1/4] Add a title to the image block advanced settings This is used to set the actual title attribute in the html of the output, and is completely separate from the image's title in the media library --- packages/block-library/src/image/block.json | 6 + packages/block-library/src/image/edit.js | 171 ++++++++++-------- packages/block-library/src/image/save.js | 2 + .../block-library/src/image/transforms.js | 2 +- 4 files changed, 104 insertions(+), 77 deletions(-) diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 68d2559ae4f48..23b9ae0239b58 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -23,6 +23,12 @@ "source": "html", "selector": "figcaption" }, + "title": { + "type": "string", + "source": "attribute", + "selector": "img", + "attribute": "title" + }, "href": { "type": "string", "source": "attribute", diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index fe51a775c4d27..96032ae5249d3 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -51,6 +51,7 @@ import { BlockControls, BlockIcon, InspectorControls, + InspectorAdvancedControls, MediaPlaceholder, URLPopover, RichText, @@ -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 ); @@ -350,6 +352,7 @@ export class ImageEdit extends Component { url: undefined, alt: undefined, id: undefined, + title: undefined, caption: undefined, } ); return; @@ -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 } ); } @@ -579,6 +587,7 @@ export class ImageEdit extends Component { rel, linkClass, linkDestination, + title, width, height, linkTarget, @@ -689,84 +698,94 @@ export class ImageEdit extends Component { const imageSizeOptions = this.getImageSizeOptions(); const getInspectorControls = ( imageWidth, imageHeight ) => ( - - - - - { __( 'Describe the purpose of the image' ) } - - { __( 'Leave empty if the image is purely decorative.' ) } - - } - /> - { ! isEmpty( imageSizeOptions ) && ( - + + + + + { __( 'Describe the purpose of the image' ) } + + { __( 'Leave empty if the image is purely decorative.' ) } + + } /> - ) } - { isResizable && ( -
-

- { __( 'Image Dimensions' ) } -

-
- - -
-
- - { [ 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 ( - - ); - } ) } - - + { ! isEmpty( imageSizeOptions ) && ( + + ) } + { isResizable && ( +
+

+ { __( 'Image Dimensions' ) } +

+
+ + +
+
+ + { [ 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 ( + + ); + } ) } + + +
-
- ) } - - + ) } + + + + + + ); // Disable reason: Each block can be selected by clicking on it diff --git a/packages/block-library/src/image/save.js b/packages/block-library/src/image/save.js index b3976c76a8de8..6f7ba6fa0f700 100644 --- a/packages/block-library/src/image/save.js +++ b/packages/block-library/src/image/save.js @@ -23,6 +23,7 @@ export default function save( { attributes } ) { id, linkTarget, sizeSlug, + title, } = attributes; const newRel = isEmpty( rel ) ? undefined : rel; @@ -40,6 +41,7 @@ export default function save( { attributes } ) { className={ id ? `wp-image-${ id }` : null } width={ width } height={ height } + title={ title } /> ); diff --git a/packages/block-library/src/image/transforms.js b/packages/block-library/src/image/transforms.js index 2af42cc2244e9..a97f0ac52f96c 100644 --- a/packages/block-library/src/image/transforms.js +++ b/packages/block-library/src/image/transforms.js @@ -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+$/ ], }, }; From 5e826109dfcdcded249413a3bdadefb207e6f460 Mon Sep 17 00:00:00 2001 From: Brent Swisher Date: Wed, 11 Sep 2019 11:55:25 -0400 Subject: [PATCH 2/4] Update help text on image title attribute to link to w3.org title description --- packages/block-library/src/image/edit.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index 96032ae5249d3..e229c948fa171 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -782,7 +782,11 @@ export class ImageEdit extends Component { label={ __( 'Title Attribute' ) } value={ title || '' } onChange={ this.onSetTitle } - help={ __( 'Provide a clear name for this image.' ) } + help={ + + { __( 'Provide an optional description for this image.' ) } + + } /> From 4fef04afe2eab4f3ff42170462c93b29a82e6abe Mon Sep 17 00:00:00 2001 From: Brent Swisher Date: Wed, 11 Sep 2019 15:17:12 -0400 Subject: [PATCH 3/4] Uopdate title attribute help text to not all be a link --- packages/block-library/src/image/edit.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index e229c948fa171..e6fda7de22b17 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -783,9 +783,13 @@ export class ImageEdit extends Component { value={ title || '' } onChange={ this.onSetTitle } help={ - - { __( 'Provide an optional description for this image.' ) } - + <> + { __( 'Describe the role of this image on the page.' ) } +
+ + { __( '(Note: many devices and browsers do not display this text.)' ) } + + } /> From 7c8d9c33edda49238df7f01faa7ee4165d6e436e Mon Sep 17 00:00:00 2001 From: Brent Swisher Date: Fri, 27 Sep 2019 15:05:48 -0400 Subject: [PATCH 4/4] Remove line break in title attribute helper text --- packages/block-library/src/image/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js index e6fda7de22b17..d5c64dbc445e0 100644 --- a/packages/block-library/src/image/edit.js +++ b/packages/block-library/src/image/edit.js @@ -785,7 +785,6 @@ export class ImageEdit extends Component { help={ <> { __( 'Describe the role of this image on the page.' ) } -
{ __( '(Note: many devices and browsers do not display this text.)' ) }