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

Add link rel and link class to image block inspector (see #7504) #7771

Merged
merged 16 commits into from
Nov 19, 2018
Merged

Add link rel and link class to image block inspector (see #7504) #7771

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
bde8135
Add link classes and rel attribute to image block (see #7504)
Jul 7, 2018
bedb73c
Make labels consistent with classic editor.
Jul 7, 2018
3c6f9da
Fix coding standards error
Jul 7, 2018
dfff33c
Add tests
Jul 7, 2018
c5bfce5
Consolidate check for presence of image link
Jul 8, 2018
41bd3d9
Rebase, incorporate upstream changes
Oct 30, 2018
d538faf
Merge branch 'upstream' into add/image-details
Oct 30, 2018
976f59d
Merge branch 'master' into add/image-details
Nov 6, 2018
05e7ebf
Changes as per review
Nov 9, 2018
3b5dc11
Merge branch 'upstream' into add/image-details
Nov 9, 2018
38f669a
Fix tests
Nov 9, 2018
b4e4409
Merge branch 'upstream' into add/image-details
Nov 10, 2018
df50d10
Merge branch 'upstream' into add/image-details
Nov 13, 2018
48dc15f
Resolve final review comment
Nov 13, 2018
2b44182
Update CONTRIBUTORS.md
Nov 13, 2018
1b14c6c
Merge branch 'upstream' into add/image-details
Nov 18, 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
56 changes: 54 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 @@ -55,6 +55,7 @@ const LINK_DESTINATION_NONE = 'none';
const LINK_DESTINATION_MEDIA = 'media';
const LINK_DESTINATION_ATTACHMENT = 'attachment';
const LINK_DESTINATION_CUSTOM = 'custom';
const NEW_TAB_REL = 'noreferrer noopener';
const ALLOWED_MEDIA_TYPES = [ 'image' ];

export const pickRelevantMediaFiles = ( image ) => {
Expand Down Expand Up @@ -97,7 +98,10 @@ class ImageEdit extends Component {
this.updateHeight = this.updateHeight.bind( this );
this.updateDimensions = this.updateDimensions.bind( this );
this.onSetCustomHref = this.onSetCustomHref.bind( this );
this.onSetLinkClass = this.onSetLinkClass.bind( this );
this.onSetLinkRel = this.onSetLinkRel.bind( this );
this.onSetLinkDestination = this.onSetLinkDestination.bind( this );
this.onSetNewTab = this.onSetNewTab.bind( this );
this.toggleIsEditing = this.toggleIsEditing.bind( this );
this.onUploadError = this.onUploadError.bind( this );

Expand Down Expand Up @@ -209,6 +213,31 @@ class ImageEdit extends Component {
this.props.setAttributes( { href: value } );
}

onSetLinkClass( value ) {
this.props.setAttributes( { linkClass: value } );
}

onSetLinkRel( value ) {
this.props.setAttributes( { rel: value } );
}

onSetNewTab( value ) {
const { rel } = this.props.attributes;
const linkTarget = value ? '_blank' : undefined;

let updatedRel = rel;
if ( linkTarget && ! rel ) {
updatedRel = NEW_TAB_REL;
} else if ( ! linkTarget && rel === NEW_TAB_REL ) {
updatedRel = undefined;
}

this.props.setAttributes( {
linkTarget,
rel: updatedRel,
} );
}

onFocusCaption() {
if ( ! this.state.captionFocused ) {
this.setState( {
Expand Down Expand Up @@ -296,7 +325,20 @@ class ImageEdit extends Component {
toggleSelection,
isRTL,
} = this.props;
const { url, alt, caption, align, id, href, linkDestination, width, height, linkTarget } = attributes;
const {
url,
alt,
caption,
align,
id,
href,
rel,
linkClass,
linkDestination,
width,
height,
linkTarget,
} = attributes;
const isExternal = isExternalImage( id, url );
const imageSizeOptions = this.getImageSizeOptions();

Expand Down Expand Up @@ -464,8 +506,18 @@ class ImageEdit extends Component {
/>
<ToggleControl
label={ __( 'Open in New Tab' ) }
onChange={ () => setAttributes( { linkTarget: ! linkTarget ? '_blank' : undefined } ) }
onChange={ this.onSetNewTab }
checked={ linkTarget === '_blank' } />
<TextControl
label={ __( 'Link CSS Class' ) }
value={ linkClass || '' }
onChange={ this.onSetLinkClass }
/>
<TextControl
label={ __( 'Link Rel' ) }
value={ rel || '' }
onChange={ this.onSetLinkRel }
/>
</Fragment>
) }
</PanelBody>
Expand Down
55 changes: 51 additions & 4 deletions packages/block-library/src/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,18 @@ const blockAttributes = {
selector: 'figure > a',
attribute: 'href',
},
rel: {
type: 'string',
source: 'attribute',
selector: 'figure > a',
attribute: 'rel',
},
linkClass: {
type: 'string',
source: 'attribute',
selector: 'figure > a',
attribute: 'class',
},
id: {
type: 'number',
},
Expand Down Expand Up @@ -89,7 +101,7 @@ const schema = {
children: {
...imageSchema,
a: {
attributes: [ 'href', 'target' ],
attributes: [ 'linkClass', 'href', 'rel', 'target' ],
greatislander marked this conversation as resolved.
Show resolved Hide resolved
children: imageSchema,
},
figcaption: {
Expand Down Expand Up @@ -132,7 +144,9 @@ export const settings = {
const anchorElement = node.querySelector( 'a' );
const linkDestination = anchorElement && anchorElement.href ? 'custom' : undefined;
const href = anchorElement && anchorElement.href ? anchorElement.href : undefined;
const attributes = getBlockAttributes( 'core/image', node.outerHTML, { align, id, linkDestination, href } );
const rel = anchorElement && anchorElement.rel ? anchorElement.rel : undefined;
const linkClass = anchorElement && anchorElement.className ? anchorElement.className : undefined;
const attributes = getBlockAttributes( 'core/image', node.outerHTML, { align, id, linkDestination, href, rel, linkClass } );
return createBlock( 'core/image', attributes );
},
},
Expand Down Expand Up @@ -181,6 +195,18 @@ export const settings = {
attribute: 'href',
selector: 'a',
},
rel: {
type: 'string',
source: 'attribute',
attribute: 'rel',
selector: 'a',
},
linkClass: {
type: 'string',
source: 'attribute',
attribute: 'class',
selector: 'a',
},
id: {
type: 'number',
shortcode: ( { named: { id } } ) => {
Expand Down Expand Up @@ -212,7 +238,19 @@ export const settings = {
edit,

save( { attributes } ) {
const { url, alt, caption, align, href, width, height, id, linkTarget } = attributes;
const {
url,
alt,
caption,
align,
href,
rel,
linkClass,
width,
height,
id,
linkTarget,
} = attributes;

const classes = classnames( {
[ `align${ align }` ]: align,
Expand All @@ -231,7 +269,16 @@ export const settings = {

const figure = (
<Fragment>
{ href ? <a href={ href } target={ linkTarget } rel={ linkTarget === '_blank' ? 'noreferrer noopener' : undefined }>{ image }</a> : image }
{ href ? (
<a
className={ linkClass }
href={ href }
target={ linkTarget }
rel={ rel }
>
{ image }
</a>
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder if this change creates an "invalid image" warning if you try to upgrade from an image with a link set to open a new tab.

  • checkout master
  • add an image with an external link
  • save
  • checkout this branch
  • refresh

The image shouldn't show up as invalid. I wonder if we should add a deprecated version for this?

To clarify: I didn't have the time to test it but it's a guess.

Copy link
Contributor

Choose a reason for hiding this comment

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

I took this for a spin, and things look like they are working as intended.

Screenshot from master:

screenshot 2018-11-19 at 11 32 48

Checked out this branch and reloaded:

screenshot 2018-11-19 at 11 33 05

I suspect the problem only occurs when you go the other way. Which is adding the attributes, then checking out a branch that removes them. And sure enough:

screenshot 2018-11-19 at 11 34 52

Going back to master:

screenshot 2018-11-19 at 11 35 16

But this shouldn't be a problem unless we choose to remove this feature :D

Copy link
Contributor

Choose a reason for hiding this comment

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

Checked again, this time I checkout master first, and set the open externally and added a custom link:

screenshot 2018-11-19 at 11 41 03

Checking out this branch and reloading still worked as expected:

screenshot 2018-11-19 at 11 41 35

👍 👍

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for the tests @jasmussen :)

) : image }
{ ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
</Fragment>
);
Expand Down
3 changes: 3 additions & 0 deletions test/integration/full-content/fixtures/core__image__custom-link-class.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:core/image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a class="custom-link" href="https://wordpress.org/"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></a></figure>
<!-- /wp:core/image -->
17 changes: 17 additions & 0 deletions test/integration/full-content/fixtures/core__image__custom-link-class.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
[
{
"clientId": "_clientId_0",
"name": "core/image",
"isValid": true,
"attributes": {
"url": "https://cldup.com/uuUqE_dXzy.jpg",
"alt": "",
"caption": "",
"href": "https://wordpress.org/",
"linkDestination": "custom",
"linkClass": "custom-link"
},
"innerBlocks": [],
"originalContent": "<figure class=\"wp-block-image\"><a class=\"custom-link\" href=\"https://wordpress.org/\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>"
}
]
22 changes: 22 additions & 0 deletions test/integration/full-content/fixtures/core__image__custom-link-class.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
[
{
"blockName": "core/image",
"attrs": {
"linkDestination": "custom"
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image\"><a class=\"custom-link\" href=\"https://wordpress.org/\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image\"><a class=\"custom-link\" href=\"https://wordpress.org/\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>\n"
]
},
{
"attrs": {},
"blockName": null,
"innerBlocks": [],
"innerHTML": "\n",
"innerContent": [
"\n"
]
}
]
3 changes: 3 additions & 0 deletions test/integration/full-content/fixtures/core__image__custom-link-class.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a class="custom-link" href="https://wordpress.org/"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt=""/></a></figure>
<!-- /wp:image -->
3 changes: 3 additions & 0 deletions test/integration/full-content/fixtures/core__image__custom-link-rel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:core/image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://wordpress.org/" rel="external"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt="" /></a></figure>
<!-- /wp:core/image -->
17 changes: 17 additions & 0 deletions test/integration/full-content/fixtures/core__image__custom-link-rel.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
[
{
"clientId": "_clientId_0",
"name": "core/image",
"isValid": true,
"attributes": {
"url": "https://cldup.com/uuUqE_dXzy.jpg",
"alt": "",
"caption": "",
"href": "https://wordpress.org/",
"linkDestination": "custom",
"rel": "external"
},
"innerBlocks": [],
"originalContent": "<figure class=\"wp-block-image\"><a href=\"https://wordpress.org/\" rel=\"external\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>"
}
]
22 changes: 22 additions & 0 deletions test/integration/full-content/fixtures/core__image__custom-link-rel.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
[
{
"blockName": "core/image",
"attrs": {
"linkDestination": "custom"
},
"innerBlocks": [],
"innerHTML": "\n<figure class=\"wp-block-image\"><a href=\"https://wordpress.org/\" rel=\"external\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>\n",
"innerContent": [
"\n<figure class=\"wp-block-image\"><a href=\"https://wordpress.org/\" rel=\"external\"><img src=\"https://cldup.com/uuUqE_dXzy.jpg\" alt=\"\" /></a></figure>\n"
]
},
{
"attrs": {},
"blockName": null,
"innerBlocks": [],
"innerHTML": "\n",
"innerContent": [
"\n"
]
}
]
3 changes: 3 additions & 0 deletions test/integration/full-content/fixtures/core__image__custom-link-rel.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://wordpress.org/" rel="external"><img src="https://cldup.com/uuUqE_dXzy.jpg" alt=""/></a></figure>
<!-- /wp:image -->