Merge PR #7771 to branch.

Merges PR #7771 to local branch to: - Bring up to date with the changes and moved files in Gutenberg - Update Tests for new expectations due to parser changes - Support rel defaults for "Open Link in New Tab" feature Props greatislander, getsource Co-authored-by: Ned Zimmerman <[email protected]>
WordPress · Oct 29, 2018 · 631fc96 · 631fc96
1 parent 0e2fa13
commit 631fc96
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 6 deletions.
diff --git a/packages/block-library/src/image/edit.js b/packages/block-library/src/image/edit.js
@@ -97,7 +97,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.state = {
@@ -200,6 +203,33 @@ 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 newTabRel = 'noreferrer noopener';
+
+ if ( value ) {
+ value = '_blank';
+ if ( ! this.props.attributes.rel ) {
+ this.props.setAttributes( { rel: newTabRel } );
+ }
+ } else {
+ if ( this.props.attributes.rel === newTabRel ) {
+ this.props.setAttributes( { rel: undefined } );
+ }
+
+ value = undefined;
+ }
+
+ this.props.setAttributes( { linkTarget: value } );
+ }
+
  onFocusCaption() {
  if ( ! this.state.captionFocused ) {
  this.setState( {
@@ -267,7 +297,7 @@ class ImageEdit extends Component {
  render() {
  const { isEditing } = this.state;
  const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, noticeOperations, noticeUI, 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 );
 
  let toolbarEditButton;
@@ -438,10 +468,21 @@ 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>
  </InspectorControls>
  );

diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js
@@ -53,6 +53,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',
  },
@@ -90,7 +102,7 @@ const schema = {
  children: {
  ...imageSchema,
  a: {
- attributes: [ 'href', 'target' ],
+ attributes: [ 'linkClass', 'href', 'rel', 'target' ],
  children: imageSchema,
  },
  figcaption: {
@@ -133,8 +145,10 @@ export const settings = {
  const anchorElement = node.querySelector( 'a' );
  const linkDestination = anchorElement && anchorElement.href ? 'custom' : undefined;
  const href = anchorElement && anchorElement.href ? anchorElement.href : undefined;
+ const rel = anchorElement && anchorElement.rel ? anchorElement.rel : undefined;
+ const linkClass = anchorElement && anchorElement.className ? anchorElement.className : undefined;
  const blockType = getBlockType( 'core/image' );
- const attributes = getBlockAttributes( blockType, node.outerHTML, { align, id, linkDestination, href } );
+ const attributes = getBlockAttributes( blockType, node.outerHTML, { align, id, linkDestination, href, rel, linkClass } );
  return createBlock( 'core/image', attributes );
  },
  },
@@ -183,6 +197,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 } } ) => {
@@ -214,7 +240,7 @@ 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,
@@ -233,7 +259,7 @@ 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 || null } href={ href } target={ linkTarget || null } rel={ rel || null }>{ image }</a> : image }
  { ! RichText.isEmpty( caption ) && <RichText.Content tagName="figcaption" value={ caption } /> }
  </Fragment>
  );

diff --git a/test/integration/full-content/fixtures/core__image__custom-link-class.html b/test/integration/full-content/fixtures/core__image__custom-link-class.html
@@ -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 -->
diff --git a/test/integration/full-content/fixtures/core__image__custom-link-class.json b/test/integration/full-content/fixtures/core__image__custom-link-class.json
@@ -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/",
+ "linkClass": "custom-link",
+ "linkDestination": "custom"
+ },
+ "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>"
+ }
+]
diff --git a/test/integration/full-content/fixtures/core__image__custom-link-class.parsed.json b/test/integration/full-content/fixtures/core__image__custom-link-class.parsed.json
@@ -0,0 +1,16 @@
+[
+ {
+ "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"
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n"
+ }
+]
diff --git a/test/integration/full-content/fixtures/core__image__custom-link-class.serialized.html b/test/integration/full-content/fixtures/core__image__custom-link-class.serialized.html
@@ -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 -->
diff --git a/test/integration/full-content/fixtures/core__image__custom-link-rel.html b/test/integration/full-content/fixtures/core__image__custom-link-rel.html
@@ -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 -->
diff --git a/test/integration/full-content/fixtures/core__image__custom-link-rel.json b/test/integration/full-content/fixtures/core__image__custom-link-rel.json
@@ -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/",
+ "rel": "external",
+ "linkDestination": "custom"
+ },
+ "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>"
+ }
+]
diff --git a/test/integration/full-content/fixtures/core__image__custom-link-rel.parsed.json b/test/integration/full-content/fixtures/core__image__custom-link-rel.parsed.json
@@ -0,0 +1,16 @@
+[
+ {
+ "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"
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n"
+ }
+]
diff --git a/test/integration/full-content/fixtures/core__image__custom-link-rel.serialized.html b/test/integration/full-content/fixtures/core__image__custom-link-rel.serialized.html
@@ -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 -->