From fa6eaeb21199ed1aa59fd88a7fbae079158955b3 Mon Sep 17 00:00:00 2001 From: Sofia Sousa Date: Fri, 16 Nov 2018 11:26:16 +0000 Subject: [PATCH 1/8] chore: Update gutenberg packages according gutenberg@4.4.0 --- package.json | 66 ++++++++++++++++++++++++++-------------------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/package.json b/package.json index 3e386b8..c728908 100644 --- 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" From 1b609d5e7de2965f5c93f62e99013f9927eb7dd7 Mon Sep 17 00:00:00 2001 From: Sofia Sousa Date: Fri, 16 Nov 2018 11:26:47 +0000 Subject: [PATCH 2/8] feat: Update scripts order according gutenberg@4.4.0 --- src/js/index.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/js/index.js b/src/js/index.js index 5116242..03d6bd2 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -7,35 +7,34 @@ import './init'; * WordPress dependencies */ import * as hooks from '@wordpress/hooks'; -import domReady from '@wordpress/dom-ready'; -import * as a11y from '@wordpress/a11y'; -import * as i18n from '@wordpress/i18n'; -// wp.i18n.setLocaleData - -import * as url from '@wordpress/url'; -import apiFetch from '@wordpress/api-fetch'; -import './scripts/api-fetch.js'; - import * as autop from '@wordpress/autop'; import * as blob from '@wordpress/blob'; import * as blockSerializationDefaultParser from '@wordpress/block-serialization-default-parser'; -import deprecated from '@wordpress/deprecated'; + import * as escapeHtml from '@wordpress/escape-html'; import * as element from '@wordpress/element'; import * as isShallowEqual from '@wordpress/is-shallow-equal'; import * as compose from '@wordpress/compose'; import * as reduxRoutine from '@wordpress/redux-routine'; - import * as data from '@wordpress/data'; -import './scripts/data.js'; +import './scripts/data'; import * as dom from '@wordpress/dom'; +import * as htmlEntities from '@wordpress/html-entities'; +import * as i18n from '@wordpress/i18n'; +// wp.i18n.setLocaleData import * as shortcode from '@wordpress/shortcode'; import * as blocks from '@wordpress/blocks'; // wp.blocks.setCategories // wp.blocks.unstable__bootstrapServerSideBlockDefinitions -import * as htmlEntities from '@wordpress/html-entities'; +import domReady from '@wordpress/dom-ready'; +import * as a11y from '@wordpress/a11y'; +import * as url from '@wordpress/url'; +import apiFetch from '@wordpress/api-fetch'; +import './scripts/api-fetch'; + +import deprecated from '@wordpress/deprecated'; import * as keycodes from '@wordpress/keycodes'; import * as richText from '@wordpress/rich-text'; import * as components from '@wordpress/components'; @@ -54,6 +53,7 @@ import { editor, oldEditor } from './scripts/editor.js'; // window._wpGutenbergCodeEditorSettings import * as plugins from '@wordpress/plugins'; + import * as blockLibrary from '@wordpress/block-library'; import * as editPost from '@wordpress/edit-post'; import * as formatLibrary from '@wordpress/format-library'; From f0ee98d23bf4a5697d26e029d70a170da4b7dfdf Mon Sep 17 00:00:00 2001 From: Sofia Sousa Date: Fri, 16 Nov 2018 11:27:25 +0000 Subject: [PATCH 3/8] feat: Remove notices override --- .../@wordpress/notices/build/store/actions.js | 127 ------------------ 1 file changed, 127 deletions(-) delete mode 100644 src/js/gutenberg-overrides/@wordpress/notices/build/store/actions.js diff --git a/src/js/gutenberg-overrides/@wordpress/notices/build/store/actions.js b/src/js/gutenberg-overrides/@wordpress/notices/build/store/actions.js deleted file mode 100644 index 5d2ca79..0000000 --- a/src/js/gutenberg-overrides/@wordpress/notices/build/store/actions.js +++ /dev/null @@ -1,127 +0,0 @@ -/** - * External dependencies - */ -import { uniqueId } from 'lodash'; - -/** - * Internal dependencies - */ -import { DEFAULT_CONTEXT } from './constants'; - -/** - * Yields action objects used in signalling that a notice is to be created. - * - * @param {?string} status Notice status. - * Defaults to `info`. - * @param {string} content Notice message. - * @param {?Object} options Notice options. - * @param {?string} options.context Context under which to - * group notice. - * @param {?string} options.id Identifier for notice. - * Automatically assigned - * if not specified. - * @param {?boolean} options.isDismissible Whether the notice can - * be dismissed by user. - * Defaults to `true`. - * @param {?Array} options.actions User actions to be - * presented with notice. - */ -export function *createNotice (status = 'info', content, options = {}) { - const { - isDismissible = true, - context = DEFAULT_CONTEXT, - id = uniqueId(context), - actions = [], - } = options; - - yield { type: 'SPEAK', message: content }; - - yield { - type: 'CREATE_NOTICE', - context, - notice: { - id, - status, - content, - isDismissible, - actions, - }, - }; -} - -/** - * Returns an action object used in signalling that a success notice is to be - * created. Refer to `createNotice` for options documentation. - * - * @see createNotice - * - * @param {string} content Notice message. - * @param {?Object} options Optional notice options. - * - * @return {Object} Action object. - */ -export function createSuccessNotice (content, options) { - return createNotice('success', content, options); -} - -/** - * Returns an action object used in signalling that an info notice is to be - * created. Refer to `createNotice` for options documentation. - * - * @see createNotice - * - * @param {string} content Notice message. - * @param {?Object} options Optional notice options. - * - * @return {Object} Action object. - */ -export function createInfoNotice (content, options) { - return createNotice('info', content, options); -} - -/** - * Returns an action object used in signalling that an error notice is to be - * created. Refer to `createNotice` for options documentation. - * - * @see createNotice - * - * @param {string} content Notice message. - * @param {?Object} options Optional notice options. - * - * @return {Object} Action object. - */ -export function createErrorNotice (content, options) { - return createNotice('error', content, options); -} - -/** - * Returns an action object used in signalling that a warning notice is to be - * created. Refer to `createNotice` for options documentation. - * - * @see createNotice - * - * @param {string} content Notice message. - * @param {?Object} options Optional notice options. - * - * @return {Object} Action object. - */ -export function createWarningNotice (content, options) { - return createNotice('warning', content, options); -} - -/** - * Returns an action object used in signalling that a notice is to be removed. - * - * @param {string} id Notice unique identifier. - * @param {?string} context Optional context (grouping) in which the notice is - * intended to appear. Defaults to default context. - * - * @return {Object} Action object. - */ -export function removeNotice (id, context = DEFAULT_CONTEXT) { - return { - type: 'REMOVE_NOTICE', - id, - context, - }; -} From a26a20036dd13dfbcc92073c74c2d92105696192 Mon Sep 17 00:00:00 2001 From: Sofia Sousa Date: Fri, 16 Nov 2018 11:28:07 +0000 Subject: [PATCH 4/8] feat: Remove temp style fix for media and text block --- src/scss/block-library.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/scss/block-library.scss b/src/scss/block-library.scss index 8773234..eda451b 100644 --- a/src/scss/block-library.scss +++ b/src/scss/block-library.scss @@ -3,8 +3,3 @@ /* * TEMPORARY FIXES */ - -// gutenberg/packages/block-library/src/media-text/style.scss -.wp-block-media-text.has-media-on-the-right { - grid-template-areas: "media-text-content media-text-media"; -} From 34cd150066c9e22cae943e504276aaa126867494 Mon Sep 17 00:00:00 2001 From: Sofia Sousa Date: Fri, 16 Nov 2018 11:37:30 +0000 Subject: [PATCH 5/8] feat: Update editor overrides according gutenberg@4.4.0 --- .../components/autosave-monitor/index.js | 2 + .../components/post-preview-button/index.js | 199 +++++++++--------- .../components/post-publish-panel/toggle.js | 19 +- 3 files changed, 122 insertions(+), 98 deletions(-) diff --git a/src/js/gutenberg-overrides/@wordpress/editor/build-module/components/autosave-monitor/index.js b/src/js/gutenberg-overrides/@wordpress/editor/build-module/components/autosave-monitor/index.js index f7a459a..815ed98 100644 --- a/src/js/gutenberg-overrides/@wordpress/editor/build-module/components/autosave-monitor/index.js +++ b/src/js/gutenberg-overrides/@wordpress/editor/build-module/components/autosave-monitor/index.js @@ -54,6 +54,7 @@ export default compose([ isAutosaveable: isEditedPostAutosaveable(), editsReference: getReferenceByDistinctEdits(), autosaveInterval, + // GUTENBERG JS canSave, canAutosave, @@ -62,6 +63,7 @@ export default compose([ withDispatch(dispatch => ({ autosave: dispatch('core/editor').autosave, })), + // GUTENBERG JS // added the ifCondition to enable/disable // the autoave feature according 'canSave' and 'canAutosave' settings diff --git a/src/js/gutenberg-overrides/@wordpress/editor/build-module/components/post-preview-button/index.js b/src/js/gutenberg-overrides/@wordpress/editor/build-module/components/post-preview-button/index.js index 40b033c..4a30bb7 100644 --- a/src/js/gutenberg-overrides/@wordpress/editor/build-module/components/post-preview-button/index.js +++ b/src/js/gutenberg-overrides/@wordpress/editor/build-module/components/post-preview-button/index.js @@ -13,6 +13,76 @@ import { withSelect, withDispatch } from '@wordpress/data'; import { DotTip } from '@wordpress/nux'; import { ifCondition, compose } from '@wordpress/compose'; +function writeInterstitialMessage (targetDocument) { + let markup = renderToString( +
+ { /* GUTENBERG-JS + + + */} +

{ __('Generating preview…') }

+
+ ); + + markup += ` + + `; + + targetDocument.write(markup); + targetDocument.close(); +} + export class PostPreviewButton extends Component { constructor (props) { super(props); @@ -54,119 +124,64 @@ export class PostPreviewButton extends Component { return `wp-preview-${postId}`; } - /** - * Opens a popup window, navigating user to a preview of the current post. - * Triggers autosave if post is autosaveable. - */ - openPreviewWindow () { - const { isAutosaveable, previewLink, currentPostLink } = this.props; + openPreviewWindow (event) { + // Our Preview button has its 'href' and 'target' set correctly for a11y + // purposes. Unfortunately, though, we can't rely on the default 'click' + // handler since sometimes it incorrectly opens a new tab instead of reusing + // the existing one. + // https://github.com/WordPress/gutenberg/pull/8330 + event.preventDefault(); - // Open a popup, BUT: Set it to a blank page until save completes. This - // is necessary because popups can only be opened in response to user - // interaction (click), but we must still wait for the post to save. + // Open up a Preview tab if needed. This is where we'll show the preview. if (! this.previewWindow || this.previewWindow.closed) { this.previewWindow = window.open('', this.getWindowTarget()); } - // Ask the browser to bring the preview tab to the front - // This can work or not depending on the browser's user preferences + // Focus the Preview tab. This might not do anything, depending on the browser's + // and user's preferences. // https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus this.previewWindow.focus(); - // If there are no changes to autosave, we cannot perform the save, but - // if there is an existing preview link (e.g. previous published post - // autosave), it should be reused as the popup destination. - if (! isAutosaveable && ! previewLink && currentPostLink) { - this.setPreviewWindowLink(currentPostLink); - return; - } - - if (! isAutosaveable) { - this.setPreviewWindowLink(previewLink); + // If we don't need to autosave the post before previewing, then we simply + // load the Preview URL in the Preview tab. + if (! this.props.isAutosaveable) { + this.setPreviewWindowLink(event.target.href); return; } + // Request an autosave. This happens asynchronously and causes the component + // to update when finished. this.props.autosave(); - let markup = renderToString( -
- { /* GUTENBERG-JS - - - */} -

{ __('Generating preview…') }

-
- ); - - markup += ` - `; - - this.previewWindow.document.write(markup); - this.previewWindow.document.close(); + // Display a 'Generating preview' message in the Preview tab while we wait for the + // autosave to finish. + writeInterstitialMessage(this.previewWindow.document); } render () { - const { isSaveable } = this.props; + const { previewLink, currentPostLink, isSaveable } = this.props; + + // Link to the `?preview=true` URL if we have it, since this lets us see + // changes that were autosaved since the post was last published. Otherwise, + // just link to the post's URL. + const href = previewLink || currentPostLink; return ( + ); + } +} + +export default compose([ + withSelect(select => { + const { + isSavingPost, + isEditedPostBeingScheduled, + getEditedPostVisibility, + isCurrentPostPublished, + isEditedPostSaveable, + isEditedPostPublishable, + isPostSavingLocked, + getCurrentPost, + getCurrentPostType, + + // GUTENBERG JS + getEditorSettings, + } = select('core/editor'); + + // GUTENBERG JS + const { canPublish } = getEditorSettings(); + + return { + isSaving: isSavingPost(), + isBeingScheduled: isEditedPostBeingScheduled(), + visibility: getEditedPostVisibility(), + isSaveable: isEditedPostSaveable(), + isPostSavingLocked: isPostSavingLocked(), + isPublishable: isEditedPostPublishable(), + isPublished: isCurrentPostPublished(), + hasPublishAction: get(getCurrentPost(), [ '_links', 'wp:action-publish' ], false), + postType: getCurrentPostType(), + + // GUTENBERG + canPublish, + }; + }), + withDispatch(dispatch => { + const { editPost, savePost } = dispatch('core/editor'); + return { + onStatusChange: status => editPost({ status }), + onSave: savePost, + }; + }), + + // GUTENBERG JS + // added the ifCondition to enable/disable + // the publish button according 'canPublish' setting + ifCondition(({ canPublish }) => canPublish), +])(PostPublishButton); From 984c72541a7921ed1cb91b2223782287a9330564 Mon Sep 17 00:00:00 2001 From: Sofia Sousa Date: Fri, 16 Nov 2018 15:02:00 +0000 Subject: [PATCH 8/8] docs: Update readme --- README.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 630d13f..6ecb6a5 100644 --- 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 `` tag to your html ``.