From 0d78a5910fa95b9862ab31abf487552674df59e4 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Fri, 2 Aug 2019 15:15:03 -0700 Subject: [PATCH 1/6] Disable gutenberg 6.2 outline styles for post content --- .../blocks/post-content/style.scss | 36 +++++++++---------- 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss index 502a118dad1b22..6b973caae6740d 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss @@ -37,31 +37,29 @@ /* Hide the content slot block UI */ .block-editor-block-list__layout { .post-content__block { - > .block-editor-block-list__block-edit { - &::before { - transition: none; - } - - > .block-editor-block-list__breadcrumb { - display: none; - } - } - &.is-selected { - > .block-editor-block-list__block-edit::before { - border: none; - box-shadow: none; - } - .block-editor-block-contextual-toolbar { display: none; } } - &.is-hovered { - > .block-editor-block-list__block-edit::before { - border: none; - box-shadow: none; + &.block-editor-block-list__block { + // Need to get super specific to override the core css selectors: + &, + &.has-child-selected, + &.is-navigate-mode, + &.is-hovered { + > .block-editor-block-list__block-edit { + &::before { + transition: none; + border: none; + outline: none; + box-shadow: none; + } + > .block-editor-block-list__breadcrumb { + display: none; + } + } } } } From 23258577e9538b275896e1fb05aec9995f54f302 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Fri, 2 Aug 2019 15:16:31 -0700 Subject: [PATCH 2/6] Disable configuration settings for FSE templates - Disables all configuration options for post content - Disables anchor for FSE templates. Enables custom class name so we can inject the correct classname for the header/footer --- .../full-site-editing/blocks/post-content/index.js | 3 ++- .../full-site-editing/blocks/post-content/style.scss | 4 ++-- .../full-site-editing/blocks/template/index.js | 3 ++- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/index.js index 4edef57bf768ab..e0b4668c39861c 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/index.js @@ -20,7 +20,8 @@ registerBlockType( 'a8c/post-content', { icon: 'layout', category: 'layout', supports: { - anchor: true, + anchor: false, + customClassName: false, html: false, multiple: false, reusable: false, diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss index 6b973caae6740d..2c81af9cb7b410 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/style.scss @@ -58,8 +58,8 @@ } > .block-editor-block-list__breadcrumb { display: none; - } - } + } + } } } } diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/index.js index edb99cbe89329b..3d67ac8d966077 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/index.js @@ -19,7 +19,8 @@ if ( 'wp_template' !== fullSiteEditing.editorPostType ) { category: 'layout', attributes: { templateId: { type: 'number' } }, supports: { - anchor: true, + anchor: false, + customClassName: true, // Needed to support the classname we inject html: false, reusable: false, }, From e5ed9c476ff4cde2bd588449c701decf62be09b5 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Fri, 2 Aug 2019 17:38:38 -0700 Subject: [PATCH 3/6] Remove block UI components from FSE template block --- .../blocks/template/index.js | 14 +++++++++ .../blocks/template/style.scss | 31 +++++++++++++++++++ 2 files changed, 45 insertions(+) diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/index.js index 3d67ac8d966077..73514f2ac64295 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/index.js @@ -4,6 +4,8 @@ */ import { registerBlockType } from '@wordpress/blocks'; import { __ } from '@wordpress/i18n'; +import { createHigherOrderComponent } from '@wordpress/compose'; +import { addFilter } from '@wordpress/hooks'; /** * Internal dependencies @@ -31,3 +33,15 @@ if ( 'wp_template' !== fullSiteEditing.editorPostType ) { }, } ); } + +const addFSETemplateClassname = createHigherOrderComponent( BlockListBlock => { + return props => { + if ( props.name !== 'a8c/template' ) { + return ; + } + + return ; + }; +}, 'addFSETemplateClassname' ); + +addFilter( 'editor.BlockListBlock', 'full-site-editing/blocks/template', addFSETemplateClassname ); diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/style.scss b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/style.scss index d6fd62be7672e3..ace8ad8ef4d008 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/style.scss +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/template/style.scss @@ -44,3 +44,34 @@ color: white; } } + +/* Hide the content slot block UI */ +.block-editor-block-list__layout { + .template__block-container { + &.is-selected { + .block-editor-block-contextual-toolbar { + display: none; + } + } + + &.block-editor-block-list__block { + // Need to get super specific to override the core css selectors: + &, + &.has-child-selected, + &.is-navigate-mode, + &.is-hovered { + > .block-editor-block-list__block-edit { + &::before { + transition: none; + border: none; + outline: none; + box-shadow: none; + } + > .block-editor-block-list__breadcrumb { + display: none; + } + } + } + } + } +} From 20e8c2f93f67590bbd5124c2bdf7da083ed9063e Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Fri, 2 Aug 2019 17:45:49 -0700 Subject: [PATCH 4/6] Disable selection of template blocks This means that you can't see any reference to their settings! Note that we cannot do this same patch for the post content block because once the block has been disabled, you can't edit the inner blocks. Will have to find a different patch for that. --- .../editor/disable-block-settings/index.js | 33 +++++++++++++++++++ .../full-site-editing/editor/index.js | 1 + 2 files changed, 34 insertions(+) create mode 100644 apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/disable-block-settings/index.js diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/disable-block-settings/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/disable-block-settings/index.js new file mode 100644 index 00000000000000..558084143c5408 --- /dev/null +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/disable-block-settings/index.js @@ -0,0 +1,33 @@ +/* global fullSiteEditing */ + +/** + * External dependencies + */ +import { select, dispatch, subscribe } from '@wordpress/data'; +import { get } from 'lodash'; + +/** + * Removes the block settings panel if the template or post content blocks are selected. + * Since it is not possible to disable the block settings entirely through Gutenberg state, + * we use a hack to deselect the block, which removes the option to change its settings. + * This is also done officially in the core PostTitle block, so there is prior art. + * + * @see https://github.com/WordPress/gutenberg/blob/master/packages/editor/src/components/post-title/index.js + */ +const unsubscribe = subscribe( () => { + // We don't care about this on the template or post editor + if ( 'page' !== fullSiteEditing.editorPostType ) { + return unsubscribe(); + } + + // Determine which block we have selected: + const selectedBlock = select( 'core/editor' ).getSelectedBlock(); + const blockName = get( selectedBlock, 'name', null ); + + // If we have selected one the template block, deselect it. + // Note: this does not work for post content because you can't + // edit inner blocks if the block is not selected. + if ( 'a8c/template' === blockName ) { + dispatch( 'core/block-editor' ).clearSelectedBlock( blockName ); + } +} ); diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/index.js index 5caae82f29606a..44c929feda65e7 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/index.js @@ -4,4 +4,5 @@ import './block-inserter'; import './template-validity-override'; import './image-block-keywords'; +import './disable-block-settings'; import './style.scss'; From eaffc0b5f7837371bdfecce0a5dd2c53f4df53f1 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Mon, 5 Aug 2019 09:14:30 -0700 Subject: [PATCH 5/6] Use a more general name for the content slot Since users can see this in a few places, we want to make sure they aren't confused when it does pop up. --- .../full-site-editing/blocks/post-content/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/index.js index e0b4668c39861c..03cf9ddd23025e 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/blocks/post-content/index.js @@ -15,8 +15,8 @@ import save from './save'; import './style.scss'; registerBlockType( 'a8c/post-content', { - title: __( 'Content Slot' ), - description: __( 'Placeholder for a post or a page.' ), + title: __( 'Content' ), + description: __( 'The page content.' ), icon: 'layout', category: 'layout', supports: { From 14705b8edcc44c9cd9d435e26ad09dcd805520f5 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Mon, 5 Aug 2019 09:14:43 -0700 Subject: [PATCH 6/6] Fix typo in comment --- .../editor/disable-block-settings/index.js | 4 +- npm-shrinkwrap.json | 99 ++++++------------- 2 files changed, 30 insertions(+), 73 deletions(-) diff --git a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/disable-block-settings/index.js b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/disable-block-settings/index.js index 558084143c5408..c3c0f01625b410 100644 --- a/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/disable-block-settings/index.js +++ b/apps/full-site-editing/full-site-editing-plugin/full-site-editing/editor/disable-block-settings/index.js @@ -24,9 +24,9 @@ const unsubscribe = subscribe( () => { const selectedBlock = select( 'core/editor' ).getSelectedBlock(); const blockName = get( selectedBlock, 'name', null ); - // If we have selected one the template block, deselect it. + // If we have selected a template block, deselect it. // Note: this does not work for post content because you can't - // edit inner blocks if the block is not selected. + // edit inner blocks if the outer block is deselected. if ( 'a8c/template' === blockName ) { dispatch( 'core/block-editor' ).clearSelectedBlock( blockName ); } diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index c13169b022ec95..a73e256b97aff6 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -41,7 +41,7 @@ "enzyme": "3.10.0", "enzyme-adapter-react-16": "1.14.0", "file-loader": "3.0.1", - "mini-css-extract-plugin-with-rtl": "github:Automattic/mini-css-extract-plugin-with-rtl", + "mini-css-extract-plugin-with-rtl": "github:Automattic/mini-css-extract-plugin-with-rtl#af1300db7027af8caa9a3015f54a34aec545cc54", "node-sass": "4.11.0", "postcss-custom-properties": "8.0.9", "postcss-loader": "3.0.0", @@ -58,8 +58,7 @@ "dependencies": { "browserslist": { "version": "4.6.6", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.6.6.tgz", - "integrity": "sha512-D2Nk3W9JL9Fp/gIcWei8LrERCS+eXu9AM5cfXA8WEZ84lFks+ARnZ0q/R69m2SV3Wjma83QDDPxsNKXUwdIsyA==", + "bundled": true, "dev": true, "requires": { "caniuse-lite": "^1.0.30000984", @@ -69,20 +68,17 @@ "dependencies": { "caniuse-lite": { "version": "1.0.30000988", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000988.tgz", - "integrity": "sha512-lPj3T8poYrRc/bniW5SQPND3GRtSrQdUM/R4mCYTbZxyi3jQiggLvZH4+BYUuX0t4TXjU+vMM7KFDQg+rSzZUQ==", + "bundled": true, "dev": true }, "electron-to-chromium": { "version": "1.3.211", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.211.tgz", - "integrity": "sha512-GZAiK3oHrs0K+LwH+HD+bdjZ17v40oQQdXbbd3dgrwgbENvazrGpcuIADSAREWnxzo9gADB1evuizrbXsnoU2Q==", + "bundled": true, "dev": true }, "node-releases": { "version": "1.1.26", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.26.tgz", - "integrity": "sha512-fZPsuhhUHMTlfkhDLGtfY80DSJTjOcx+qD1j5pqPkuhUHVS7xHZIg9EE4DHK8O3f0zTxXHX5VIkDG8pu98/wfQ==", + "bundled": true, "dev": true, "requires": { "semver": "^5.3.0" @@ -135,8 +131,7 @@ "dependencies": { "semver": { "version": "6.1.1", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.1.1.tgz", - "integrity": "sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==", + "bundled": true, "dev": true } } @@ -6463,8 +6458,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -6482,13 +6476,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6501,18 +6493,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -6615,8 +6604,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -6626,7 +6614,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6639,20 +6626,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -6669,7 +6653,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -6742,8 +6725,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -6753,7 +6735,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -6829,8 +6810,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -6860,7 +6840,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6878,7 +6857,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6917,13 +6895,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } } @@ -13050,8 +13026,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -13072,14 +13047,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -13094,20 +13067,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -13224,8 +13194,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -13237,7 +13206,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -13252,7 +13220,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -13260,14 +13227,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -13286,7 +13251,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -13367,8 +13331,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -13380,7 +13343,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -13466,8 +13428,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -13503,7 +13464,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -13523,7 +13483,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -13567,14 +13526,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }