feat: Update gallery and image overrides (@wordpress/block-library 2.…

…1.8)
front · Nov 7, 2018 · 0dfef26 · 0dfef26
1 parent a617509
commit 0dfef26
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/src/js/gutenberg-overrides/@wordpress/block-library/build-module/gallery/gallery-image.js b/src/js/gutenberg-overrides/@wordpress/block-library/build-module/gallery/gallery-image.js
@@ -113,8 +113,8 @@ class GalleryImage extends Component {
 
     // Disable reason: Image itself is not meant to be
     // interactive, but should direct image selection and unfocus caption fields
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
-    const img = url ? <img src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } { ...data } /> : <Spinner />;
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    const img = url ? <img src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } tabIndex="0" onKeyDown={ this.onImageClick } { ...data } /> : <Spinner />;
 
     const className = classnames({
       'is-selected': isSelected,

diff --git a/src/js/gutenberg-overrides/@wordpress/block-library/build-module/image/edit.js b/src/js/gutenberg-overrides/@wordpress/block-library/build-module/image/edit.js
@@ -8,6 +8,7 @@ import {
   map,
   pick,
   startCase,
+  keyBy,
 } from 'lodash';
 
 /**
@@ -86,6 +87,7 @@ const isExternalImage = (id, url) => url && ! id && ! isBlobURL(url);
 class ImageEdit extends Component {
   constructor (props) {
     super(props);
+
     const { attributes } = props;
 
     this.updateAlt = this.updateAlt.bind(this);
@@ -183,7 +185,7 @@ class ImageEdit extends Component {
       href = undefined;
     }
     else if (value === LINK_DESTINATION_MEDIA) {
-      href = this.props.attributes.url;
+      href = (this.props.image && this.props.image.source_url) || this.props.attributes.url;
     }
     else if (value === LINK_DESTINATION_ATTACHMENT) {
       href = this.props.image && this.props.image.link;
@@ -262,7 +264,7 @@ class ImageEdit extends Component {
     };
   }
 
-  getAvailableSizes () {
+  getImageSizes () {
     return get(this.props.image, [ 'media_details', 'sizes' ], {});
   }
 
@@ -283,9 +285,22 @@ class ImageEdit extends Component {
 
   render () {
     const { isEditing } = this.state;
-    const { attributes, setAttributes, isLargeViewport, isSelected, className, maxWidth, noticeOperations, noticeUI, toggleSelection, isRTL } = this.props;
+    const {
+      attributes,
+      setAttributes,
+      isLargeViewport,
+      isSelected,
+      className,
+      maxWidth,
+      noticeOperations,
+      noticeUI,
+      toggleSelection,
+      isRTL,
+      availableImageSizes,
+    } = this.props;
     const { url, alt, caption, align, id, href, linkDestination, width, height, linkTarget, data } = attributes;
     const isExternal = isExternalImage(id, url);
+    const availableImageSizesBySlug = keyBy(availableImageSizes, 'slug');
 
     let toolbarEditButton;
     if (url) {
@@ -358,7 +373,7 @@ class ImageEdit extends Component {
       'is-focused': isSelected,
     });
 
-    const availableSizes = this.getAvailableSizes();
+    const imageSizes = this.getImageSizes();
     const isResizable = [ 'wide', 'full' ].indexOf(align) === -1 && isLargeViewport;
     const isLinkURLInputDisabled = linkDestination !== LINK_DESTINATION_CUSTOM;
 
@@ -371,13 +386,13 @@ class ImageEdit extends Component {
             onChange={ this.updateAlt }
             help={ __('Alternative text describes your image to people who can’t see it. Add a short description with its key details.') }
           />
-          { ! isEmpty(availableSizes) && (
+          { ! isEmpty(imageSizes) && (
             <SelectControl
               label={ __('Image Size') }
               value={ url }
-              options={ map(availableSizes, (size, name) => ({
+              options={ map(imageSizes, (size, slug) => ({
                 value: size.source_url,
-                label: startCase(name),
+                label: availableImageSizesBySlug[ slug ] ? availableImageSizesBySlug[ slug ].name : startCase(slug),
               })) }
               onChange={ this.updateImageURL }
             />
@@ -596,12 +611,13 @@ export default compose([
     const { getMedia } = select('core');
     const { getEditorSettings } = select('core/editor');
     const { id } = props.attributes;
-    const { maxWidth, isRTL } = getEditorSettings();
+    const { maxWidth, isRTL, availableImageSizes } = getEditorSettings();
 
     return {
       image: id ? getMedia(id) : null,
       maxWidth,
       isRTL,
+      availableImageSizes,
     };
   }),
   withViewportMatch({ isLargeViewport: 'medium' }),