From 421ef5624a6af64e681a9ed8c61b457dd2954191 Mon Sep 17 00:00:00 2001 From: Florian Truchot Date: Wed, 4 Sep 2019 13:41:09 +0200 Subject: [PATCH 01/10] Add graphical empty state into block inserter --- .../src/components/inserter/style.scss | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index b8834e5233ac1..3ef6ffd5b0109 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -89,6 +89,9 @@ $block-inserter-search-height: 38px; } .block-editor-inserter__results { + align-items: center; + justify-content: center; + display: flex; flex-grow: 1; overflow: auto; position: relative; @@ -123,9 +126,25 @@ $block-inserter-search-height: 38px; } .block-editor-inserter__no-results { - font-style: italic; padding: 24px; text-align: center; + color: $dark-gray-500; + + &::before { + content: "?"; + display: flex; + justify-content: center; + align-items: center; + padding: $grid-size-large * 1.38 $grid-size-large; + margin-left: auto; + margin-right: auto; + font-style: normal; + font-size: 1.62em; + color: $dark-gray-300; + border-radius: $radius-round-rectangle; + border: $border-width dashed $dark-gray-150; + margin-bottom: $grid-size-large; + } } .block-editor-inserter__child-blocks { From 3b2d104d15ee7f69db94db928af98549edb0ae11 Mon Sep 17 00:00:00 2001 From: Florian Truchot Date: Thu, 5 Sep 2019 19:22:52 +0200 Subject: [PATCH 02/10] Fix .component-panel__body behaviour into inserter --- packages/block-editor/src/components/inserter/style.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 3ef6ffd5b0109..004cce14cb624 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -89,9 +89,10 @@ $block-inserter-search-height: 38px; } .block-editor-inserter__results { + display: flex; + flex-wrap: wrap; align-items: center; justify-content: center; - display: flex; flex-grow: 1; overflow: auto; position: relative; @@ -110,6 +111,10 @@ $block-inserter-search-height: 38px; [role="presentation"] + .components-panel__body { border-top: none; } + + .components-panel__body { + width: 100%; + } } .block-editor-inserter__popover .block-editor-block-types-list { From 631bb7311dfee605b24143359a199884695ca8f0 Mon Sep 17 00:00:00 2001 From: Florian Truchot Date: Sat, 7 Sep 2019 00:44:46 +0200 Subject: [PATCH 03/10] Fix spacing between .components-panel__body --- packages/block-editor/src/components/inserter/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 004cce14cb624..4844b06e65183 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -92,6 +92,7 @@ $block-inserter-search-height: 38px; display: flex; flex-wrap: wrap; align-items: center; + align-content: flex-start; justify-content: center; flex-grow: 1; overflow: auto; From 45576041809251ac7ea1254a2554430bfa3d4ede Mon Sep 17 00:00:00 2001 From: Florian Truchot Date: Sat, 7 Sep 2019 00:46:43 +0200 Subject: [PATCH 04/10] Fix width on mobile with no results --- packages/block-editor/src/components/inserter/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 4844b06e65183..a128b48305d76 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -51,7 +51,7 @@ $block-inserter-search-height: 38px; } .block-editor-inserter__main-area { - width: auto; + width: 100%; display: flex; flex-direction: column; height: 100%; From 1049907309de5f8a81605ed0f76e496b598534cb Mon Sep 17 00:00:00 2001 From: Florian Truchot Date: Sat, 7 Sep 2019 00:50:57 +0200 Subject: [PATCH 05/10] Fix vertical alignment --- packages/block-editor/src/components/inserter/style.scss | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index a128b48305d76..c58ecfd1402c0 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -90,10 +90,7 @@ $block-inserter-search-height: 38px; .block-editor-inserter__results { display: flex; - flex-wrap: wrap; - align-items: center; - align-content: flex-start; - justify-content: center; + flex-direction: column; flex-grow: 1; overflow: auto; position: relative; From 315d196e4dd9272002dd5efb130192839b2c5d32 Mon Sep 17 00:00:00 2001 From: Florian Truchot Date: Sat, 7 Sep 2019 00:52:21 +0200 Subject: [PATCH 06/10] Fix no results width --- packages/block-editor/src/components/inserter/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index c58ecfd1402c0..346c4ff5755c7 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -91,6 +91,7 @@ $block-inserter-search-height: 38px; .block-editor-inserter__results { display: flex; flex-direction: column; + align-items: center; flex-grow: 1; overflow: auto; position: relative; From a01284c8adb899fe1b64a36919d310021f792c52 Mon Sep 17 00:00:00 2001 From: Florian Truchot Date: Sat, 7 Sep 2019 00:58:09 +0200 Subject: [PATCH 07/10] Fix spacing between .components-panel__body and force .block-editor-inserter__main-area width --- packages/block-editor/src/components/inserter/style.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 004cce14cb624..a0e8e909ef374 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -51,7 +51,7 @@ $block-inserter-search-height: 38px; } .block-editor-inserter__main-area { - width: auto; + width: 100%; display: flex; flex-direction: column; height: 100%; @@ -90,9 +90,7 @@ $block-inserter-search-height: 38px; .block-editor-inserter__results { display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: center; + flex-direction: column; flex-grow: 1; overflow: auto; position: relative; @@ -134,6 +132,7 @@ $block-inserter-search-height: 38px; padding: 24px; text-align: center; color: $dark-gray-500; + margin: auto; &::before { content: "?"; From 64275d6ad6b26b645a19a048bb783a880b0d859b Mon Sep 17 00:00:00 2001 From: Florian Truchot Date: Sat, 28 Sep 2019 14:59:19 +0200 Subject: [PATCH 08/10] Fix spacing with grid size variables --- packages/block-editor/src/components/inserter/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index a0e8e909ef374..92c759ed16231 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -139,11 +139,11 @@ $block-inserter-search-height: 38px; display: flex; justify-content: center; align-items: center; - padding: $grid-size-large * 1.38 $grid-size-large; + padding: $grid-size-xlarge $grid-size-large; margin-left: auto; margin-right: auto; font-style: normal; - font-size: 1.62em; + font-size: $grid-size-large + $grid-size-small; color: $dark-gray-300; border-radius: $radius-round-rectangle; border: $border-width dashed $dark-gray-150; From d7de44efa1ce0a5bb0cbb9d219d2fedb355acd48 Mon Sep 17 00:00:00 2001 From: Florian Truchot Date: Sat, 28 Sep 2019 15:27:22 +0200 Subject: [PATCH 09/10] Display icon with JS instead of CSS --- .../block-editor/src/components/inserter/menu.js | 9 ++++++++- .../block-editor/src/components/inserter/style.scss | 12 ++++++------ 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 0d555633d91a9..4f69d8e0da92e 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -27,6 +27,8 @@ import { PanelBody, withSpokenMessages, Tip, + Path, + SVG, } from '@wordpress/components'; import { getCategories, @@ -356,7 +358,12 @@ export class InserterMenu extends Component { ) } { isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory ) && ( -

{ __( 'No blocks found.' ) }

+

+ + + + { __( 'No blocks found.' ) } +

) } diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 92c759ed16231..a3e541eb0389e 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -134,12 +134,11 @@ $block-inserter-search-height: 38px; color: $dark-gray-500; margin: auto; - &::before { - content: "?"; - display: flex; - justify-content: center; - align-items: center; - padding: $grid-size-xlarge $grid-size-large; + & > svg { + display: block; + width: 24px; + height: 24px; + padding: $grid-size-xlarge $grid-size-xlarge + $grid-size-large; margin-left: auto; margin-right: auto; font-style: normal; @@ -148,6 +147,7 @@ $block-inserter-search-height: 38px; border-radius: $radius-round-rectangle; border: $border-width dashed $dark-gray-150; margin-bottom: $grid-size-large; + box-sizing: content-box; } } From 38691bee97b526debd0771a037494947e4abe049 Mon Sep 17 00:00:00 2001 From: Florian Truchot Date: Sat, 28 Sep 2019 15:29:29 +0200 Subject: [PATCH 10/10] Remove unused style --- packages/block-editor/src/components/inserter/style.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index a3e541eb0389e..cfd2638d14495 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -141,9 +141,6 @@ $block-inserter-search-height: 38px; padding: $grid-size-xlarge $grid-size-xlarge + $grid-size-large; margin-left: auto; margin-right: auto; - font-style: normal; - font-size: $grid-size-large + $grid-size-small; - color: $dark-gray-300; border-radius: $radius-round-rectangle; border: $border-width dashed $dark-gray-150; margin-bottom: $grid-size-large;