From 7156a59f67a76b73201e58c9a9a80574d73ea58b Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 31 Jan 2020 16:58:54 +0000 Subject: [PATCH 1/4] Let blocks implement their own viewport size for example rendering --- package-lock.json | 8 ++++---- packages/block-editor/src/components/inserter/menu.js | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index d4562580e2b47a..81bc0e14a35a6f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19502,7 +19502,7 @@ }, "node-pre-gyp": { "version": "0.12.0", - "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.12.0.tgz", + "resolved": false, "integrity": "sha512-4KghwV8vH5k+g2ylT+sLTjy5wmUOb9vPhnM8NHvRf9dHmnW/CndrFXy2aRPaPST6dugXSdHXfeaHQm77PIz/1A==", "dev": true, "optional": true, @@ -19521,7 +19521,7 @@ }, "nopt": { "version": "4.0.1", - "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz", + "resolved": false, "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=", "dev": true, "optional": true, @@ -27294,7 +27294,7 @@ "dependencies": { "clone-deep": { "version": "0.2.4", - "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", + "resolved": "http://registry.npmjs.org/clone-deep/-/clone-deep-0.2.4.tgz", "integrity": "sha1-TnPdCen7lxzDhnDF3O2cGJZIHMY=", "dev": true, "requires": { @@ -27328,7 +27328,7 @@ "dependencies": { "kind-of": { "version": "2.0.1", - "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz", + "resolved": "http://registry.npmjs.org/kind-of/-/kind-of-2.0.1.tgz", "integrity": "sha1-AY7HpM5+OobLkUG+UZ0kyPqpgbU=", "dev": true, "requires": { diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index ea82c7d935e12b..db9da57e62d76e 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -251,6 +251,7 @@ export class InserterMenu extends Component { ! isEmpty( itemsPerCollection ); const hoveredItemBlockType = hoveredItem ? getBlockType( hoveredItem.name ) : null; const hasHelpPanel = hasItems && showInserterHelpPanel; + const viewportWidth = ( hoveredItemBlockType && hoveredItemBlockType.example && hoveredItemBlockType.example.viewportWidth ) ? hoveredItemBlockType.example.viewportWidth : 500; // Disable reason (no-autofocus): The inserter menu is a modal display, not one which // is always visible, and one which already incurs this behavior of autoFocus via @@ -416,7 +417,7 @@ export class InserterMenu extends Component {
Date: Fri, 31 Jan 2020 17:00:58 +0000 Subject: [PATCH 2/4] Let blocks implement their own viewport size for example rendering --- packages/block-editor/src/components/inserter/menu.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index db9da57e62d76e..4370edacb06b07 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -251,7 +251,12 @@ export class InserterMenu extends Component { ! isEmpty( itemsPerCollection ); const hoveredItemBlockType = hoveredItem ? getBlockType( hoveredItem.name ) : null; const hasHelpPanel = hasItems && showInserterHelpPanel; - const viewportWidth = ( hoveredItemBlockType && hoveredItemBlockType.example && hoveredItemBlockType.example.viewportWidth ) ? hoveredItemBlockType.example.viewportWidth : 500; + const viewportWidth = + hoveredItemBlockType && + hoveredItemBlockType.example && + hoveredItemBlockType.example.viewportWidth + ? hoveredItemBlockType.example.viewportWidth + : 500; // Disable reason (no-autofocus): The inserter menu is a modal display, not one which // is always visible, and one which already incurs this behavior of autoFocus via From ec596e0fb57a494f35c96b80e65c87090fbe426b Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 4 Feb 2020 09:08:46 -0800 Subject: [PATCH 3/4] use lodash get to avoid loads of presence checks --- packages/block-editor/src/components/inserter/menu.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 4370edacb06b07..10865da9369fa7 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { filter, findIndex, flow, groupBy, isEmpty, map, sortBy, without, includes } from 'lodash'; +import { filter, findIndex, flow, get, groupBy, isEmpty, map, sortBy, without, includes } from 'lodash'; import scrollIntoView from 'dom-scroll-into-view'; import classnames from 'classnames'; @@ -251,12 +251,7 @@ export class InserterMenu extends Component { ! isEmpty( itemsPerCollection ); const hoveredItemBlockType = hoveredItem ? getBlockType( hoveredItem.name ) : null; const hasHelpPanel = hasItems && showInserterHelpPanel; - const viewportWidth = - hoveredItemBlockType && - hoveredItemBlockType.example && - hoveredItemBlockType.example.viewportWidth - ? hoveredItemBlockType.example.viewportWidth - : 500; + const viewportWidth = get( hoveredItemBlockType, 'example.viewportWidth', 500); // Disable reason (no-autofocus): The inserter menu is a modal display, not one which // is always visible, and one which already incurs this behavior of autoFocus via From f8ecd46d9a462b979462e711e6a64363cb7436b0 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 4 Feb 2020 09:57:32 -0800 Subject: [PATCH 4/4] reformat --- .../block-editor/src/components/inserter/menu.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 10865da9369fa7..cf1a6c4fb07c6e 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -1,7 +1,18 @@ /** * External dependencies */ -import { filter, findIndex, flow, get, groupBy, isEmpty, map, sortBy, without, includes } from 'lodash'; +import { + filter, + findIndex, + flow, + get, + groupBy, + isEmpty, + map, + sortBy, + without, + includes, +} from 'lodash'; import scrollIntoView from 'dom-scroll-into-view'; import classnames from 'classnames'; @@ -251,7 +262,7 @@ export class InserterMenu extends Component { ! isEmpty( itemsPerCollection ); const hoveredItemBlockType = hoveredItem ? getBlockType( hoveredItem.name ) : null; const hasHelpPanel = hasItems && showInserterHelpPanel; - const viewportWidth = get( hoveredItemBlockType, 'example.viewportWidth', 500); + const viewportWidth = get( hoveredItemBlockType, 'example.viewportWidth', 500 ); // Disable reason (no-autofocus): The inserter menu is a modal display, not one which // is always visible, and one which already incurs this behavior of autoFocus via