From 33f3a1530bdd2eb61a3a5241ab5a57c516a4107d Mon Sep 17 00:00:00 2001
From: mateuswetah <mateus.m.luna@gmail.com>
Date: Thu, 9 Jul 2020 18:05:27 -0300
Subject: [PATCH] Gets rid of placeholder control for items list, collecitons
 list and terms list block using ToolbarButton #399.

---
 .../collections-list/index.js                 | 48 +++++++++----------
 .../dynamic-items-list/index.js               | 45 ++++++++---------
 .../tainacan-items/items-list/index.js        | 46 +++++++++---------
 .../tainacan-terms/terms-list/index.js        | 44 ++++++++---------
 4 files changed, 86 insertions(+), 97 deletions(-)

diff --git a/src/views/gutenberg-blocks/tainacan-collections/collections-list/index.js b/src/views/gutenberg-blocks/tainacan-collections/collections-list/index.js
index 8d4227c2c..b2b2c4401 100644
--- a/src/views/gutenberg-blocks/tainacan-collections/collections-list/index.js
+++ b/src/views/gutenberg-blocks/tainacan-collections/collections-list/index.js
@@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { RangeControl, IconButton, Button, ToggleControl, Placeholder, Toolbar } = wp.components;
+const { RangeControl, IconButton, Button, ToggleControl, Placeholder, Toolbar, PanelBody, ToolbarButton } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
@@ -11,7 +11,7 @@ import CollectionsModal from './collections-modal.js';
 registerBlockType('tainacan/collections-list', {
     title: __('Tainacan Collections List', 'tainacan'),
     icon:
-        <svg width="24" height="24" viewBox="0 -5 12 16">
+        <svg width="24" height="24" viewBox="0 -3 12 16">
             <path
                 fill="var(--tainacan-block-primary, $primary)"
                 d="M10,8.8v1.3H1.2C0.6,10.1,0,9.5,0,8.8V2.5h1.3v6.3H10z M6.9,0H3.8C3.1,0,2.5,0.6,2.5,1.3l0,5c0,0.7,0.6,1.2,1.3,1.2h7.5
@@ -196,13 +196,13 @@ registerBlockType('tainacan/collections-list', {
         const layoutControls = [
             {
                 icon: 'grid-view',
-                title: __( 'Grid View' ),
+                title: __( 'Grid View', 'tainacan' ),
                 onClick: () => updateLayout('grid'),
                 isActive: layout === 'grid',
             },
             {
                 icon: 'list-view',
-                title: __( 'List View' ),
+                title: __( 'List View', 'tainacan' ),
                 onClick: () => updateLayout('list'),
                 isActive: layout === 'list',
             }
@@ -220,12 +220,29 @@ registerBlockType('tainacan/collections-list', {
                 <div>
                     <BlockControls>
                         <Toolbar controls={ layoutControls } />
+                        { selectedCollectionsHTML.length ?
+                            <Toolbar>
+                                <ToolbarButton onClick={ openCollectionsModal } >
+                                    <p>
+                                        <svg width="24" height="24" viewBox="0 -5 12 16">
+                                            <path
+                                                d="M10,8.8v1.3H1.2C0.6,10.1,0,9.5,0,8.8V2.5h1.3v6.3H10z M6.9,0H3.8C3.1,0,2.5,0.6,2.5,1.3l0,5c0,0.7,0.6,1.2,1.3,1.2h7.5
+                                                c0.7,0,1.3-0.6,1.3-1.2V2.5c0-0.7-0.6-1.2-1.3-1.2H8.2L6.9,0z"/>       
+                                        </svg>
+                                    </p>&nbsp;
+                                    {  __( 'Select collections', 'tainacan' ) }
+                                </ToolbarButton>
+                            </Toolbar>
+                        : null }
                     </BlockControls>
                 </div>
 
                 <div>
                     <InspectorControls>
-                        <div style={{ marginTop: '24px' }}>
+                        <PanelBody
+                                title={ __('List settings', 'tainacan') }
+                                initialOpen={ true }
+                            >
                             { layout == 'list' ? 
                                 <ToggleControl
                                     label={__('Image', 'tainacan')}
@@ -266,7 +283,7 @@ registerBlockType('tainacan/collections-list', {
                                     </div>
                                 </div>
                             : null }
-                        </div>
+                        </PanelBody>
                     </InspectorControls>
                 </div>
 
@@ -287,25 +304,6 @@ registerBlockType('tainacan/collections-list', {
                                 onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/> 
                             : null
                         }
-                        { selectedCollectionsHTML.length ? (
-                            <div className="tainacan-block-control">
-                                <p>
-                                    <svg width="24" height="24" viewBox="0 -5 12 16">
-                                        <path
-                                            d="M10,8.8v1.3H1.2C0.6,10.1,0,9.5,0,8.8V2.5h1.3v6.3H10z M6.9,0H3.8C3.1,0,2.5,0.6,2.5,1.3l0,5c0,0.7,0.6,1.2,1.3,1.2h7.5
-                                            c0.7,0,1.3-0.6,1.3-1.2V2.5c0-0.7-0.6-1.2-1.3-1.2H8.2L6.9,0z"/>       
-                                    </svg>
-                                    {__('Expose collections from your Tainacan repository', 'tainacan')}
-                                </p>
-                                <Button
-                                    isPrimary
-                                    type="submit"
-                                    onClick={ () => openCollectionsModal() }>
-                                    {__('Select collections', 'tainacan')}
-                                </Button>   
-                            </div>
-                            ): null
-                        }
                     </div>
                     ) : null
                 }
diff --git a/src/views/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js b/src/views/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js
index be5adcd3f..7593b5c63 100644
--- a/src/views/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js
+++ b/src/views/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js
@@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
+const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, ToolbarButton, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
@@ -452,19 +452,19 @@ registerBlockType('tainacan/dynamic-items-list', {
         const layoutControls = [
             {
                 icon: 'grid-view',
-                title: __( 'Grid View' ),
+                title: __( 'Grid View', 'tainacan' ),
                 onClick: () => updateLayout('grid'),
                 isActive: layout === 'grid',
             },
             {
                 icon: 'list-view',
-                title: __( 'List View' ),
+                title: __( 'List View', 'tainacan' ),
                 onClick: () => updateLayout('list'),
                 isActive: layout === 'list',
             },
             {
                 icon: 'layout',
-                title: __( 'Mosaic View' ),
+                title: __( 'Mosaic View', 'tainacan' ),
                 onClick: () => updateLayout('mosaic'),
                 isActive: layout === 'mosaic',
             }
@@ -482,6 +482,22 @@ registerBlockType('tainacan/dynamic-items-list', {
                 <div>
                     <BlockControls>
                         <Toolbar controls={ layoutControls } />
+                        { items.length ? 
+                            <Toolbar>
+                                <ToolbarButton onClick={ openDynamicItemsModal }>
+                                    <p>
+                                        <svg
+                                                xmlns="http://www.w3.org/2000/svg"
+                                                viewBox="0 0 24 24"
+                                                height="24px"
+                                                width="24px">
+                                            <path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
+                                        </svg>
+                                    </p>&nbsp;
+                                    {__('Configure search', 'tainacan')}  
+                                </ToolbarButton>
+                            </Toolbar>
+                        : null }
                     </BlockControls>
                 </div>
 
@@ -719,27 +735,6 @@ registerBlockType('tainacan/dynamic-items-list', {
                             : null
                         }
                         
-                        { items.length ? (
-                            <div className="tainacan-block-control">
-                                <p>
-                                    <svg
-                                            xmlns="http://www.w3.org/2000/svg"
-                                            viewBox="0 0 24 24"
-                                            height="24px"
-                                            width="24px">
-                                        <path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
-                                    </svg>
-                                    {__('Dynamically list items from a Tainacan items search', 'tainacan')}
-                                </p>
-                                <Button
-                                    isPrimary
-                                    type="submit"
-                                    onClick={ () => openDynamicItemsModal() }>
-                                    {__('Configure search', 'tainacan')}
-                                </Button>    
-                            </div>
-                            ): null
-                        }
                     </div>
                     ) : null
                 }
diff --git a/src/views/gutenberg-blocks/tainacan-items/items-list/index.js b/src/views/gutenberg-blocks/tainacan-items/items-list/index.js
index 4387437d9..bd4abae75 100644
--- a/src/views/gutenberg-blocks/tainacan-items/items-list/index.js
+++ b/src/views/gutenberg-blocks/tainacan-items/items-list/index.js
@@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { RangeControl, IconButton, Button, ToggleControl, Placeholder, Toolbar } = wp.components;
+const { RangeControl, IconButton, Button, ToggleControl, Placeholder, Toolbar, PanelBody, ToolbarButton } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
@@ -201,13 +201,13 @@ registerBlockType('tainacan/items-list', {
         const layoutControls = [
             {
                 icon: 'grid-view',
-                title: __( 'Grid View' ),
+                title: __( 'Grid View', 'tainacan' ),
                 onClick: () => updateLayout('grid'),
                 isActive: layout === 'grid',
             },
             {
                 icon: 'list-view',
-                title: __( 'List View' ),
+                title: __( 'List View', 'tainacan' ),
                 onClick: () => updateLayout('list'),
                 isActive: layout === 'list',
             }
@@ -225,12 +225,29 @@ registerBlockType('tainacan/items-list', {
                 <div>
                     <BlockControls>
                         <Toolbar controls={ layoutControls } />
+                        { selectedItemsHTML.length ?
+                            <Toolbar>
+                                <ToolbarButton onClick={ openItemsModal } >
+                                    <p>
+                                        <svg width="24" height="24" viewBox="0 -2 12 16">
+                                            <path
+                                                d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
+                                                c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>       
+                                        </svg>
+                                    </p>&nbsp;
+                                    {  __( 'Add more items', 'tainacan' ) }
+                                </ToolbarButton>
+                            </Toolbar>
+                        : null }
                     </BlockControls>
                 </div>
 
                 <div>
                     <InspectorControls>
-                        <div style={{ marginTop: '24px' }}>
+                        <PanelBody
+                                title={ __('List settings', 'tainacan') }
+                                initialOpen={ true }
+                            >
                             { layout == 'list' ? 
                                 <ToggleControl
                                     label={__('Image', 'tainacan')}
@@ -271,7 +288,7 @@ registerBlockType('tainacan/items-list', {
                                     </div>
                                 </div>
                             : null }
-                        </div>
+                        </PanelBody>
                     </InspectorControls>
                 </div>
 
@@ -296,25 +313,6 @@ registerBlockType('tainacan/items-list', {
                                 onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/> 
                             : null
                         }
-                        { selectedItemsHTML.length ? (
-                            <div className="tainacan-block-control">
-                                <p>
-                                    <svg width="24" height="24" viewBox="0 -2 12 16">
-                                        <path
-                                            d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
-                                            c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>       
-                                    </svg>
-                                    {__('Expose items from your Tainacan collections', 'tainacan')}
-                                </p>
-                                <Button
-                                    isPrimary
-                                    type="submit"
-                                    onClick={ () => openItemsModal() }>
-                                    {__('Add more items', 'tainacan')}
-                                </Button>    
-                            </div>
-                            ): null
-                        }
                     </div>
                     ) : null
                 }
diff --git a/src/views/gutenberg-blocks/tainacan-terms/terms-list/index.js b/src/views/gutenberg-blocks/tainacan-terms/terms-list/index.js
index 43ec7d9e4..5dd0af6d3 100644
--- a/src/views/gutenberg-blocks/tainacan-terms/terms-list/index.js
+++ b/src/views/gutenberg-blocks/tainacan-terms/terms-list/index.js
@@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { IconButton, Button, ToggleControl, Placeholder, Toolbar } = wp.components;
+const { IconButton, Button, ToggleControl, Placeholder, Toolbar, PanelBody, ToolbarButton } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
@@ -191,13 +191,13 @@ registerBlockType('tainacan/terms-list', {
         const layoutControls = [
             {
                 icon: 'grid-view',
-                title: __( 'Grid View' ),
+                title: __( 'Grid View', 'tainacan' ),
                 onClick: () => updateLayout('grid'),
                 isActive: layout === 'grid',
             },
             {
                 icon: 'list-view',
-                title: __( 'List View' ),
+                title: __( 'List View', 'tainacan' ),
                 onClick: () => updateLayout('list'),
                 isActive: layout === 'list',
             }
@@ -215,12 +215,28 @@ registerBlockType('tainacan/terms-list', {
                 <div>
                     <BlockControls>
                         <Toolbar controls={ layoutControls } />
+                        { selectedTermsHTML.length ?
+                            <Toolbar>
+                                <ToolbarButton onClick={ openTermsModal } >
+                                    <p>
+                                        <svg width="24" height="24" viewBox="0 -3 12 17">
+                                            <path
+                                                d="M 4.4,2.5 H 0 V 0 h 4.4 l 1.2,1.3 z m -1.9,5 v 3.1 H 5 v 1.2 H 1.3 v -8 H 2.5 V 6.3 H 5 V 7.6 H 2.5 Z m 8.2,0.7 H 6.3 V 5.7 h 4.4 l 1.2,1.2 z M 11.9,11.3 10.7,10 H 6.3 v 2.5 h 4.4 z"/>       
+                                        </svg>
+                                    </p>&nbsp;
+                                    {  __( 'Select terms', 'tainacan' ) }
+                                </ToolbarButton>
+                            </Toolbar>
+                        : null }
                     </BlockControls>
                 </div>
 
                 <div>
                     <InspectorControls>
-                        <div style={{ marginTop: '24px' }}>
+                        <PanelBody
+                                title={ __('List settings', 'tainacan') }
+                                initialOpen={ true }
+                            >
                             { layout == 'list' ? 
                                 <ToggleControl
                                     label={__('Image', 'tainacan')}
@@ -247,7 +263,7 @@ registerBlockType('tainacan/terms-list', {
                                     }
                                 />
                             : null }
-                        </div>
+                        </PanelBody>
                     </InspectorControls>
                 </div>
 
@@ -274,24 +290,6 @@ registerBlockType('tainacan/terms-list', {
                                 onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/> 
                             : null 
                         }
-                        { selectedTermsHTML.length ? (
-                            <div className="tainacan-block-control">
-                                    <p>
-                                        <svg width="24" height="24" viewBox="0 -2 12 16">
-                                            <path
-                                                d="M 4.4,2.5 H 0 V 0 h 4.4 l 1.2,1.3 z m -1.9,5 v 3.1 H 5 v 1.2 H 1.3 v -8 H 2.5 V 6.3 H 5 V 7.6 H 2.5 Z m 8.2,0.7 H 6.3 V 5.7 h 4.4 l 1.2,1.2 z M 11.9,11.3 10.7,10 H 6.3 v 2.5 h 4.4 z"/>       
-                                        </svg>
-                                        {__('Expose terms from your Tainacan taxonomies', 'tainacan')}
-                                    </p>
-                                    <Button
-                                        isPrimary
-                                        type="submit"
-                                        onClick={ () => openTermsModal() }>
-                                        {__('Select terms', 'tainacan')}
-                                    </Button>   
-                                </div>
-                            ): null
-                        }
                     </div>
                     ) : null
                 }