feat: Update block-library overrides according [email protected]

src/js/gutenberg-overrides/@wordpress/block-library/build-module/cover/index.js

@@ -398,7 +398,7 @@ export const settings = {
     }
   ),
 
-  save ({ attributes, className }) {
+  save ({ attributes }) {
     const {
       align,
       backgroundType,
@@ -421,7 +421,6 @@ export const settings = {
     }
 
     const classes = classnames(
-      className,
       dimRatioToClass(dimRatio),
       overlayColorClass,
       {
@@ -495,11 +494,10 @@ export const settings = {
       },
     },
 
-    save ({ attributes, className }) {
+    save ({ attributes }) {
       const { url, title, hasParallax, dimRatio, align } = attributes;
       const style = backgroundImageStyles(url);
       const classes = classnames(
-        className,
         dimRatioToClass(dimRatio),
         {
           'has-background-dim': dimRatio !== 0,

src/js/gutenberg-overrides/@wordpress/block-library/build-module/gallery/edit.js

@@ -1,13 +1,13 @@
 /**
  * External Dependencies
  */
-import { filter, pick } from 'lodash';
+import { filter, pick, get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { Component, Fragment } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
   IconButton,
   DropZone,
@@ -45,7 +45,9 @@ export function defaultColumnsNumber (attributes) {
 }
 
 export const pickRelevantMediaFiles = image => {
-  return pick(image, [ 'alt', 'id', 'link', 'url', 'caption' ]);
+  const imageProps = pick(image, [ 'alt', 'id', 'link', 'caption' ]);
+  imageProps.url = get(image, [ 'sizes', 'large', 'url' ]) || get(image, [ 'media_details', 'sizes', 'large', 'source_url' ]) || image.url;
+  return imageProps;
 };
 
 class GalleryEdit extends Component {
@@ -243,21 +245,27 @@ class GalleryEdit extends Component {
         { noticeUI }
         <ul className={ `${className} align${align} columns-${columns} ${imageCrop ? 'is-cropped' : ''}` }>
           { dropZone }
-          { images.map((img, index) => (
-            <li className="blocks-gallery-item" key={ img.id || img.url }>
-              <GalleryImage
-                url={ img.url }
-                alt={ img.alt }
-                id={ img.id }
-                isSelected={ isSelected && this.state.selectedImage === index }
-                onRemove={ this.onRemoveImage(index) }
-                onSelect={ this.onSelectImage(index) }
-                setAttributes={ attrs => this.setImageAttributes(index, attrs) }
-                caption={ img.caption }
-                data={ img.data }
-              />
-            </li>
-          )) }
+          { images.map((img, index) => {
+            /* translators: %1$d is the order number of the image, %2$d is the total number of images. */
+            const ariaLabel = __(sprintf('image %1$d of %2$d in gallery', (index + 1), images.length));
+
+            return (
+              <li className="blocks-gallery-item" key={ img.id || img.url }>
+                <GalleryImage
+                  url={ img.url }
+                  alt={ img.alt }
+                  id={ img.id }
+                  isSelected={ isSelected && this.state.selectedImage === index }
+                  onRemove={ this.onRemoveImage(index) }
+                  onSelect={ this.onSelectImage(index) }
+                  setAttributes={ attrs => this.setImageAttributes(index, attrs) }
+                  caption={ img.caption }
+                  aria-label={ ariaLabel }
+                  data={ img.data }
+                />
+              </li>
+            );
+          }) }
           { isSelected &&
           <li className="blocks-gallery-item has-add-item-button">
             <FormFileUpload

src/js/gutenberg-overrides/@wordpress/block-library/build-module/gallery/gallery-image.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress Dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { IconButton, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
@@ -98,7 +98,7 @@ class GalleryImage extends Component {
   }
 
   render () {
-    const { url, alt, id, linkTo, link, isSelected, caption, onRemove, setAttributes, data } = this.props;
+    const { url, alt, id, linkTo, link, isSelected, caption, onRemove, setAttributes, 'aria-label': ariaLabel, data } = this.props;
 
     let href;
 
@@ -111,10 +111,25 @@ class GalleryImage extends Component {
         break;
     }
 
-    // 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
-    const img = url ? <img src={ url } alt={ alt } data-id={ id } onClick={ this.onImageClick } tabIndex="0" onKeyDown={ this.onImageClick } { ...data } /> : <Spinner />;
+    const img = (
+      // Disable reason: Image itself is not meant to be interactive, but should
+      // direct image selection and unfocus caption fields.
+      /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+      <Fragment>
+        <img
+          src={ url }
+          alt={ alt }
+          data-id={ id }
+          onClick={ this.onImageClick }
+          tabIndex="0"
+          onKeyDown={ this.onImageClick }
+          aria-label={ ariaLabel }
+          { ...data }
+        />
+        { isBlobURL(url) && <Spinner /> }
+      </Fragment>
+      /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+    );
 
     const className = classnames({
       'is-selected': isSelected,

src/js/gutenberg-overrides/@wordpress/block-library/build-module/image/edit.js

@@ -6,15 +6,16 @@ import {
   get,
   isEmpty,
   map,
+  last,
   pick,
-  startCase,
-  keyBy,
+  compact,
 } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { getPath } from '@wordpress/url';
+import { __, sprintf } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { getBlobByURL, revokeBlobURL, isBlobURL } from '@wordpress/blob';
 import {
@@ -24,6 +25,7 @@ import {
   PanelBody,
   ResizableBox,
   SelectControl,
+  Spinner,
   TextControl,
   TextareaControl,
   Toolbar,
@@ -59,7 +61,9 @@ const LINK_DESTINATION_CUSTOM = 'custom';
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 export const pickRelevantMediaFiles = image => {
-  return pick(image, [ 'alt', 'id', 'link', 'url', 'caption' ]);
+  const imageProps = pick(image, [ 'alt', 'id', 'link', 'caption' ]);
+  imageProps.url = get(image, [ 'sizes', 'large', 'url' ]) || get(image, [ 'media_details', 'sizes', 'large', 'source_url' ]) || image.url;
+  return imageProps;
 };
 
 /**
@@ -87,9 +91,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);
     this.updateAlignment = this.updateAlignment.bind(this);
     this.onFocusCaption = this.onFocusCaption.bind(this);
@@ -102,7 +104,9 @@ class ImageEdit extends Component {
     this.updateDimensions = this.updateDimensions.bind(this);
     this.onSetCustomHref = this.onSetCustomHref.bind(this);
     this.onSetLinkDestination = this.onSetLinkDestination.bind(this);
+    this.getFilename = this.getFilename.bind(this);
     this.toggleIsEditing = this.toggleIsEditing.bind(this);
+    this.onUploadError = this.onUploadError.bind(this);
 
     this.state = {
       captionFocused: false,
@@ -144,6 +148,14 @@ class ImageEdit extends Component {
     }
   }
 
+  onUploadError (message) {
+    const { noticeOperations } = this.props;
+    noticeOperations.createErrorNotice(message);
+    this.setState({
+      isEditing: true,
+    });
+  }
+
   onSelectImage (media) {
     if (! media || ! media.url) {
       this.props.setAttributes({
@@ -264,8 +276,11 @@ class ImageEdit extends Component {
     };
   }
 
-  getImageSizes () {
-    return get(this.props.image, [ 'media_details', 'sizes' ], {});
+  getFilename (url) {
+    const path = getPath(url);
+    if (path) {
+      return last(path.split('/'));
+    }
   }
 
   getLinkDestinationOptions () {
@@ -283,6 +298,20 @@ class ImageEdit extends Component {
     });
   }
 
+  getImageSizeOptions () {
+    const { imageSizes, image } = this.props;
+    return compact(map(imageSizes, ({ name, slug }) => {
+      const sizeUrl = get(image, [ 'media_details', 'sizes', slug, 'source_url' ]);
+      if (! sizeUrl) {
+        return null;
+      }
+      return {
+        value: sizeUrl,
+        label: name,
+      };
+    }));
+  }
+
   render () {
     const { isEditing } = this.state;
     const {
@@ -292,15 +321,13 @@ class ImageEdit extends Component {
       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');
+    const imageSizeOptions = this.getImageSizeOptions();
 
     let toolbarEditButton;
     if (url) {
@@ -358,7 +385,7 @@ class ImageEdit extends Component {
             onSelect={ this.onSelectImage }
             onSelectURL={ this.onSelectURL }
             notices={ noticeUI }
-            onError={ noticeOperations.createErrorNotice }
+            onError={ this.onUploadError }
             accept="image/*"
             allowedTypes={ ALLOWED_MEDIA_TYPES }
             value={ { id, src } }
@@ -373,7 +400,6 @@ class ImageEdit extends Component {
       'is-focused': isSelected,
     });
 
-    const imageSizes = this.getImageSizes();
     const isResizable = [ 'wide', 'full' ].indexOf(align) === -1 && isLargeViewport;
     const isLinkURLInputDisabled = linkDestination !== LINK_DESTINATION_CUSTOM;
 
@@ -386,14 +412,11 @@ 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(imageSizes) && (
+          { ! isEmpty(imageSizeOptions) && (
             <SelectControl
               label={ __('Image Size') }
               value={ url }
-              options={ map(imageSizes, (size, slug) => ({
-                value: size.source_url,
-                label: availableImageSizesBySlug[ slug ] ? availableImageSizesBySlug[ slug ].name : startCase(slug),
-              })) }
+              options={ imageSizeOptions }
               onChange={ this.updateImageURL }
             />
           ) }
@@ -494,10 +517,28 @@ class ImageEdit extends Component {
                 imageHeight,
               } = sizes;
 
-              // Disable reason: Image itself is not meant to be
-              // interactive, but should direct focus to block
-              // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-              const img = <img src={ url } alt={ alt } onClick={ this.onImageClick } { ...data } />;
+              const filename = this.getFilename(url);
+              let defaultedAlt;
+              if (alt) {
+                defaultedAlt = alt;
+              }
+              else if (filename) {
+                defaultedAlt = sprintf(__('This image has an empty alt attribute; its file name is %s'), filename);
+              }
+              else {
+                defaultedAlt = __('This image has an empty alt attribute');
+              }
+
+              const img = (
+                // Disable reason: Image itself is not meant to be interactive, but
+                // should direct focus to block.
+                /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+                <Fragment>
+                  <img src={ url } alt={ defaultedAlt } onClick={ this.onImageClick } { ...data } />
+                  { isBlobURL(url) && <Spinner /> }
+                </Fragment>
+                /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+              );
 
               if (! isResizable || ! imageWidthWithinContainer) {
                 return (
@@ -517,6 +558,13 @@ class ImageEdit extends Component {
               const minWidth = imageWidth < imageHeight ? MIN_SIZE : MIN_SIZE * ratio;
               const minHeight = imageHeight < imageWidth ? MIN_SIZE : MIN_SIZE / ratio;
 
+              // With the current implementation of ResizableBox, an image needs an explicit pixel value for the max-width.
+              // In absence of being able to set the content-width, this max-width is currently dictated by the vanilla editor style.
+              // The following variable adds a buffer to this vanilla style, so 3rd party themes have some wiggleroom.
+              // This does, in most cases, allow you to scale the image beyond the width of the main column, though not infinitely.
+              // @todo It would be good to revisit this once a content-width variable becomes available.
+              const maxWidthBuffer = maxWidth * 2.5;
+
               let showRightHandle = false;
               let showLeftHandle = false;
 
@@ -561,9 +609,9 @@ class ImageEdit extends Component {
                       } : undefined
                     }
                     minWidth={ minWidth }
-                    maxWidth={ maxWidth }
+                    maxWidth={ maxWidthBuffer }
                     minHeight={ minHeight }
-                    maxHeight={ maxWidth / ratio }
+                    maxHeight={ maxWidthBuffer / ratio }
                     lockAspectRatio
                     enable={ {
                       top: false,

src/js/gutenberg-overrides/@wordpress/block-library/build-module/image/index.js

@@ -11,7 +11,6 @@ import { __ } from '@wordpress/i18n';
 import {
   createBlock,
   getBlockAttributes,
-  getBlockType,
   getPhrasingContentSchema,
 } from '@wordpress/blocks';
 import { RichText } from '@wordpress/editor';
@@ -138,8 +137,7 @@ export const settings = {
           const anchorElement = node.querySelector('a');
           const linkDestination = anchorElement && anchorElement.href ? 'custom' : undefined;
           const href = anchorElement && anchorElement.href ? anchorElement.href : undefined;
-          const blockType = getBlockType('core/image');
-          const attributes = getBlockAttributes(blockType, node.outerHTML, { align, id, linkDestination, href });
+          const attributes = getBlockAttributes('core/image', node.outerHTML, { align, id, linkDestination, href });
           return createBlock('core/image', attributes);
         },
       },