Merge branch 'release/v3.0.0-rc3'

front · Nov 16, 2018 · 2314158 · 2314158
2 parents 5644ffe + 984c725
commit 2314158
Show file tree

Hide file tree

Showing 17 changed files with 535 additions and 336 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@ We made [Gutenberg](https://github.com/Wordpress/gutenberg) editor a little more
 
 Gutenberg editor can **be easly included in your apps** with this [package](https://github.com/front/gutenberg-js).
 
-This package is based on [Gutenberg v4.2.0](https://github.com/WordPress/gutenberg/releases/tag/v4.2.0) and respective @wordpress packages versions.
+This package is based on [Gutenberg v4.4.0](https://github.com/WordPress/gutenberg/releases/tag/v4.4.0) and respective @wordpress packages versions.
 
 ## Table of contents
 
@@ -285,8 +285,8 @@ We've tried to make it easy to import **gutenberg-js** modules to your apps.
 // Importing global variables that Gutenberg requires
 import './globals';
 
-// Importing editPost module
-import { editPost } from '@frontkom/gutenberg-js';
+// Importing domReady and editPost modules
+import { domReady, editPost } from '@frontkom/gutenberg-js';
 
 // Don't forget to import the style
 import '@frontkom/gutenberg-js/build/css/block-library/style.css';
@@ -327,7 +327,11 @@ const settings = {
 const overridePost = {};
 
 // Et voilá... Initializing the editor!
-editPost.initializeEditor(target, postType, postId, settings, overridePost);
+window._wpLoadGutenbergEditor = new Promise(function (resolve) {
+    domReady(function () {
+        resolve(editPost.initializeEditor(target, postType, postId, settings, overridePost));
+    });
+});
 ```
 
 **Note**: Gutenberg requires utf-8 encoding, so don't forget to add `<meta charset="utf-8">` tag to your html `<head>`.

diff --git a/package.json b/package.json
@@ -33,64 +33,64 @@
   ],
   "dependencies": {
     "@wordpress/a11y": "^2.0.2",
-    "@wordpress/api-fetch": "2.2.2",
+    "@wordpress/api-fetch": "2.2.4",
     "@wordpress/autop": "^2.0.2",
     "@wordpress/blob": "^2.1.0",
-    "@wordpress/block-library": "2.1.8",
-    "@wordpress/block-serialization-default-parser": "^1.0.2",
-    "@wordpress/blocks": "5.1.2",
-    "@wordpress/components": "^5.0.2",
-    "@wordpress/core-data": "^2.0.9",
-    "@wordpress/data": "^3.1.0",
-    "@wordpress/date": "^2.1.0",
+    "@wordpress/block-library": "2.2.4",
+    "@wordpress/block-serialization-default-parser": "^2.0.0",
+    "@wordpress/blocks": "6.0.0",
+    "@wordpress/components": "^6.0.2",
+    "@wordpress/compose": "^3.0.0",
+    "@wordpress/core-data": "^2.0.13",
+    "@wordpress/data": "^4.0.0",
+    "@wordpress/date": "^3.0.0",
     "@wordpress/deprecated": "^2.0.3",
-    "@wordpress/dom": "^2.0.4",
+    "@wordpress/dom": "^2.0.6",
     "@wordpress/dom-ready": "^2.0.2",
-    "@wordpress/edit-post": "2.0.3",
-    "@wordpress/editor": "6.1.1",
-    "@wordpress/element": "^2.1.5",
+    "@wordpress/edit-post": "3.0.2",
+    "@wordpress/editor": "8.0.0",
+    "@wordpress/element": "^2.1.8",
     "@wordpress/escape-html": "^1.0.1",
-    "@wordpress/format-library": "^1.0.3",
+    "@wordpress/format-library": "^1.2.2",
     "@wordpress/hooks": "^2.0.3",
     "@wordpress/html-entities": "^2.0.2",
-    "@wordpress/i18n": "^3.0.1",
+    "@wordpress/i18n": "^3.1.0",
     "@wordpress/is-shallow-equal": "^1.1.4",
     "@wordpress/keycodes": "^2.0.3",
-    "@wordpress/notices": "^1.0.2",
-    "@wordpress/nux": "^2.0.9",
-    "@wordpress/plugins": "^2.0.6",
+    "@wordpress/notices": "^1.0.5",
+    "@wordpress/nux": "^3.0.0",
+    "@wordpress/plugins": "^2.0.9",
     "@wordpress/redux-routine": "^3.0.3",
-    "@wordpress/rich-text": "^2.0.2",
+    "@wordpress/rich-text": "^3.0.0",
     "@wordpress/shortcode": "^2.0.2",
     "@wordpress/token-list": "^1.0.2",
-    "@wordpress/url": "~2.2.0",
-    "@wordpress/viewport": "^2.0.8",
+    "@wordpress/url": "2.3.0",
+    "@wordpress/viewport": "^2.0.11",
     "@wordpress/wordcount": "^2.0.3",
     "tinymce": "4.8.0"
   },
   "devDependencies": {
+    "@babel/core": "7.0.0",
     "@wordpress/babel-plugin-makepot": "^2.1.2",
-    "@wordpress/scripts": "^2.4.1",
+    "@wordpress/scripts": "^2.4.3",
     "babel-core": "^6.26.3",
-    "babel-eslint": "7.2.3",
-    "babel-jest": "20.0.3",
-    "babel-loader": "7.1.4",
+    "babel-eslint": "^7.2.3",
+    "babel-jest": "^20.0.3",
+    "babel-loader": "^7.1.5",
     "babel-preset-react-app": "^3.1.1",
-    "babel-runtime": "6.26.0",
+    "babel-runtime": "^6.26.0",
     "clean-webpack-plugin": "^0.1.19",
-    "copy-webpack-plugin": "4.5.2",
-    "cssnano": "4.0.3",
-    "eslint": "^5.0.1",
+    "eslint": "^5.9.0",
     "eslint-plugin-jsx-a11y": "^6.1.0",
     "eslint-plugin-react": "^7.10.0",
     "extract-text-webpack-plugin": "4.0.0-beta.0",
     "node-sass": "git://github.com/sass/node-sass.git#v4.7.0",
     "path-replace-loader": "^2.0.0",
-    "postcss-color-function": "4.0.1",
-    "postcss-loader": "2.1.3",
-    "postcss-wrapper-loader": "0.0.2",
-    "raw-loader": "0.5.1",
-    "sass-loader": "6.0.7",
+    "postcss-color-function": "^4.0.1",
+    "postcss-loader": "^2.1.6",
+    "postcss-wrapper-loader": "^0.0.2",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^6.0.7",
     "string-replace-webpack-plugin": "^0.1.3",
     "webpack": "4.8.3",
     "webpack-cli": "2.1.3"

diff --git a/src/js/gutenberg-overrides/@wordpress/block-library/build-module/cover/index.js b/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,

diff --git a/src/js/gutenberg-overrides/@wordpress/block-library/build-module/gallery/edit.js b/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

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
@@ -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,