Creates TainacanBlocksCompatToolbar function and replaces ToolbarGroups usage by it. #461

src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js

@@ -0,0 +1,29 @@
+const { Button, ToolbarGroup, ToolbarButton } = wp.components;
+
+export default function TainacanBlocksCompatToolbar({ label, icon, onClick, onClickParams, controls }) {
+    return tainacan_blocks.wp_version < '5.4' ?
+        <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ () => onClick(onClickParams) }>
+            <p style={{ margin: 0 }}>
+               { icon }
+            </p>&nbsp;
+            { label }
+        </Button>
+        : 
+        <ToolbarGroup>
+            { tainacan_blocks.wp_version < '5.5' ?
+                <Button style={{ whiteSpace: 'nowrap' }} onClick={ () => onClick(onClickParams) }>
+                    <p>
+                        { icon }
+                    </p>&nbsp;
+                    { label }
+                </Button>
+                :
+                <ToolbarButton onClick={ () => onClick(onClickParams) }>
+                    <p>
+                        { icon }
+                    </p>&nbsp;
+                    { label }
+                </ToolbarButton>
+            }    
+        </ToolbarGroup>
+}

src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/index.js

@@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody, ToolbarGroup, ToolbarButton } = wp.components;
+const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
@@ -10,6 +10,7 @@ import CarouselCollectionsModal from './carousel-collections-modal.js';
 import tainacan from '../../js/axios.js';
 import axios from 'axios';
 import qs from 'qs';
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 
 registerBlockType('tainacan/carousel-collections-list', {
     title: __('Tainacan Collections Carousel', 'tainacan'),
@@ -322,49 +323,18 @@ registerBlockType('tainacan/carousel-collections-list', {
 
                 { collections.length ?
                     <BlockControls>
-                        { tainacan_blocks.wp_version < '5.4' ?
+                        { 
-                            <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ () => openCarouselModal() } >
+                            TainacanBlocksCompatToolbar({
-                                <p style={{ margin: 0 }}>
+                                label: __('Add more collections', 'tainacan'),
-                                    <svg
+                                icon: <svg
                                             xmlns="http://www.w3.org/2000/svg"
-                                            viewBox="0 0 24 24"
+                                            viewBox="0 -2 24 24"
                                             height="24px"
                                             width="24px">
                                         <path d="M18,17v2H12a5.65,5.65,0,0,0-.36-2ZM2,7v7.57a5.74,5.74,0,0,1,2-1.2V7ZM20,6H15L13,4H8A2,2,0,0,0,6,6v7a6,6,0,0,1,5.19,3H20a2,2,0,0,0,2-2V8A2,2,0,0,0,20,6ZM7,16.05v6.06l3.06-3.06ZM5,22.11V16.05L1.94,19.11Z"/>
-                                    </svg>
+                                    </svg>,
-                                </p>&nbsp;
+                                onClick: openCarouselModal
-                                { __('Add more collections', 'tainacan') } 
+                            })
-                            </Button>
-                            : 
-                            <ToolbarGroup>
-                                { tainacan_blocks.wp_version < '5.5' ?
-                                    <Button style={{ whiteSpace: 'nowrap' }} onClick={ () => openCarouselModal() } >
-                                        <p>
-                                            <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    viewBox="0 0 24 24"
-                                                    height="24px"
-                                                    width="24px">
-                                                <path d="M18,17v2H12a5.65,5.65,0,0,0-.36-2ZM2,7v7.57a5.74,5.74,0,0,1,2-1.2V7ZM20,6H15L13,4H8A2,2,0,0,0,6,6v7a6,6,0,0,1,5.19,3H20a2,2,0,0,0,2-2V8A2,2,0,0,0,20,6ZM7,16.05v6.06l3.06-3.06ZM5,22.11V16.05L1.94,19.11Z"/>
-                                            </svg>
-                                        </p>&nbsp;
-                                        { __('Add more collections', 'tainacan') } 
-                                    </Button>
-                                    :
-                                    <ToolbarButton onClick={ () => openCarouselModal() } >
-                                        <p>
-                                            <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    viewBox="0 0 24 24"
-                                                    height="24px"
-                                                    width="24px">
-                                                <path d="M18,17v2H12a5.65,5.65,0,0,0-.36-2ZM2,7v7.57a5.74,5.74,0,0,1,2-1.2V7ZM20,6H15L13,4H8A2,2,0,0,0,6,6v7a6,6,0,0,1,5.19,3H20a2,2,0,0,0,2-2V8A2,2,0,0,0,20,6ZM7,16.05v6.06l3.06-3.06ZM5,22.11V16.05L1.94,19.11Z"/>
-                                            </svg>
-                                        </p>&nbsp;
-                                        { __('Add more collections', 'tainacan') } 
-                                    </ToolbarButton>
-                                }
-                            </ToolbarGroup>
                         }
                     </BlockControls>
                 : null }

src/views/gutenberg-blocks/tainacan-collections/collections-list/index.js

@@ -2,10 +2,11 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { RangeControl, IconButton, Button, ToggleControl, Placeholder, Toolbar, ToolbarGroup, PanelBody, ToolbarButton } = wp.components;
+const { RangeControl, IconButton, Button, ToggleControl, Placeholder, Toolbar, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 import CollectionsModal from './collections-modal.js';
 
 registerBlockType('tainacan/collections-list', {
@@ -221,43 +222,15 @@ registerBlockType('tainacan/collections-list', {
                     <BlockControls>
                         <Toolbar controls={ layoutControls } />
                         { selectedCollectionsHTML.length ?
-                            tainacan_blocks.wp_version < '5.4' ?
+                            TainacanBlocksCompatToolbar({
-                                <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ openCollectionsModal } >
+                                label: __( 'Select collections', 'tainacan' ),
-                                   <p style={{ margin: 0 }}>
+                                icon: <svg width="24" height="24" viewBox="0 -5 12 16">
-                                        <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>
+                                    </svg>,
-                                    </p>&nbsp;
+                                onClick: openCollectionsModal
-                                    {  __( 'Select collections', 'tainacan' ) }
+                            })
-                                </Button>
-                                : 
-                                <ToolbarGroup>
-                                    { tainacan_blocks.wp_version < '5.5' ?
-                                        <Button style={{ whiteSpace: 'nowrap' }} 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' ) }
-                                        </Button>
-                                        : 
-                                        <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>
-                                    }
-                                </ToolbarGroup>
                         : null }
                     </BlockControls>
                 </div>

src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js

@@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { BaseControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, ToolbarGroup, ToolbarButton, PanelBody } = wp.components;
+const { BaseControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
@@ -11,6 +11,7 @@ import ParentTermModal from './parent-term-modal.js';
 import tainacan from '../../js/axios.js';
 import axios from 'axios';
 import qs from 'qs';
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 
 registerBlockType('tainacan/facets-list', {
     title: __('Tainacan Facets List', 'tainacan'),
@@ -381,49 +382,17 @@ registerBlockType('tainacan/facets-list', {
                     <BlockControls>
                         <Toolbar controls={ layoutControls } />
                         { facets.length ? (
-                            tainacan_blocks.wp_version < '5.4' ?
+                                TainacanBlocksCompatToolbar({
-                                <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ () => openMetadataModal() } >
+                                    label: __('Select facets', 'tainacan'),
-                                   <p style={{ margin: 0 }}>
+                                    icon: <svg 
-                                        <svg 
                                             xmlns="http://www.w3.org/2000/svg" 
                                             viewBox="0 0 24 24"
                                             height="24px"
                                             width="24px">
                                         <path d="M21.43,13.64,19.32,16a2.57,2.57,0,0,1-2,1H11a3.91,3.91,0,0,0,0-.49,5.49,5.49,0,0,0-5-5.47V9.64A2.59,2.59,0,0,1,8.59,7H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,13.64ZM4,3A2,2,0,0,0,2,5v7.3a5.32,5.32,0,0,1,2-1V5H16V3ZM11,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,0-7,2.74,2.74,0,0,1,.5,0A3.5,3.5,0,0,1,9,16a2.92,2.92,0,0,1,0,.51,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,1,0,5.5,18,1.5,1.5,0,0,0,7,16.53Z"/>
-                                        </svg>
+                                    </svg>,
-                                    </p>&nbsp;
+                                    onclick: openMetadataModal
-                                    {__('Select facets', 'tainacan')}
+                                })
-                                </Button>
-                                : 
-                                <ToolbarGroup>
-                                    { tainacan_blocks.wp_version < '5.5' ?
-                                        <Button style={{ whiteSpace: 'nowrap' }} onClick={ () => openMetadataModal() }>
-                                            <p>
-                                                <svg 
-                                                        xmlns="http://www.w3.org/2000/svg" 
-                                                        viewBox="0 0 24 24"
-                                                        height="24px"
-                                                        width="24px">
-                                                    <path d="M21.43,13.64,19.32,16a2.57,2.57,0,0,1-2,1H11a3.91,3.91,0,0,0,0-.49,5.49,5.49,0,0,0-5-5.47V9.64A2.59,2.59,0,0,1,8.59,7H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,13.64ZM4,3A2,2,0,0,0,2,5v7.3a5.32,5.32,0,0,1,2-1V5H16V3ZM11,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,0-7,2.74,2.74,0,0,1,.5,0A3.5,3.5,0,0,1,9,16a2.92,2.92,0,0,1,0,.51,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,1,0,5.5,18,1.5,1.5,0,0,0,7,16.53Z"/>
-                                                </svg>
-                                            </p>&nbsp;
-                                            {__('Select facets', 'tainacan')}
-                                        </Button>
-                                        :
-                                        <ToolbarButton onClick={ () => openMetadataModal() }>
-                                            <p>
-                                                <svg 
-                                                        xmlns="http://www.w3.org/2000/svg" 
-                                                        viewBox="0 0 24 24"
-                                                        height="24px"
-                                                        width="24px">
-                                                    <path d="M21.43,13.64,19.32,16a2.57,2.57,0,0,1-2,1H11a3.91,3.91,0,0,0,0-.49,5.49,5.49,0,0,0-5-5.47V9.64A2.59,2.59,0,0,1,8.59,7H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,13.64ZM4,3A2,2,0,0,0,2,5v7.3a5.32,5.32,0,0,1,2-1V5H16V3ZM11,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,0-7,2.74,2.74,0,0,1,.5,0A3.5,3.5,0,0,1,9,16a2.92,2.92,0,0,1,0,.51,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,1,0,5.5,18,1.5,1.5,0,0,0,7,16.53Z"/>
-                                                </svg>
-                                            </p>&nbsp;
-                                            {__('Select facets', 'tainacan')}
-                                        </ToolbarButton>
-                                    }    
-                                </ToolbarGroup>
                             ): null
                         }
                     </BlockControls>

src/views/gutenberg-blocks/tainacan-items/carousel-items-list/index.js

@@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPicker, ColorPalette, BaseControl, PanelBody, ToolbarGroup, ToolbarButton } = wp.components;
+const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
@@ -10,6 +10,7 @@ import CarouselItemsModal from './carousel-items-modal.js';
 import tainacan from '../../js/axios.js';
 import axios from 'axios';
 import qs from 'qs';
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 
 registerBlockType('tainacan/carousel-items-list', {
     title: __('Tainacan Collection\'s Items Carousel', 'tainacan'),
@@ -361,92 +362,32 @@ registerBlockType('tainacan/carousel-items-list', {
 
                 { items.length ?
                     <BlockControls>
-                        { tainacan_blocks.wp_version < '5.4' ?
+                        { loadStrategy != 'search' ?
-                            loadStrategy != 'search' ? 
+                            TainacanBlocksCompatToolbar({
-                                <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ () => openCarouseltemsModal('selection') } >
+                                label: __('Add more items', 'tainacan'),
-                                    <p style={{ margin: 0 }}>
+                                icon: <svg
-                                        <svg
                                         xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 24 24"
                                             height="24px"
                                             width="24px">
                                         <path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
-                                        </svg>
+                                    </svg>,
-                                    </p>&nbsp;
+                                onClick: openCarouseltemsModal,
-                                    { __('Add more items', 'tainacan') }
+                                onClickParams: 'selection'
-                                </Button>
+                            })
                             :
-                                <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ () => openCarouseltemsModal('search') } >
+                            TainacanBlocksCompatToolbar({
-                                    <p style={{ margin: 0 }}>
+                                label: __('Configure a search', 'tainacan'),
-                                        <svg
+                                icon: <svg
                                             xmlns="http://www.w3.org/2000/svg"
                                             viewBox="0 0 24 24"
                                             height="24px"
                                             width="24px">
                                         <path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
-                                        </svg>
+                                    </svg>,
-                                    </p>&nbsp;
+                                onClick: openCarouseltemsModal,
-                                    { __('Configure a search', 'tainacan') } 
+                                onClickParams: 'search'
-                                </Button>
+                            }) 
-                            : 
-                            <ToolbarGroup>
-                                { loadStrategy != 'search' ? (
-                                    tainacan_blocks.wp_version < '5.5' ? 
-                                        <Button style={{ whiteSpace: 'nowrap' }} onClick={ () => openCarouseltemsModal('selection')  } >
-                                            <p>
-                                                <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        viewBox="0 0 24 24"
-                                                        height="24px"
-                                                        width="24px">
-                                                    <path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
-                                                </svg>
-                                            </p>&nbsp;
-                                            { __('Add more items', 'tainacan') }
-                                        </Button>
-                                        :
-                                        <ToolbarButton onClick={ () => openCarouseltemsModal('selection')  } >
-                                            <p>
-                                                <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        viewBox="0 0 24 24"
-                                                        height="24px"
-                                                        width="24px">
-                                                    <path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
-                                                </svg>
-                                            </p>&nbsp;
-                                            { __('Add more items', 'tainacan') }
-                                        </ToolbarButton>
-                                    ) : 
-                                    ( tainacan_blocks.wp_version < '5.5' ? 
-                                        <Button style={{ whiteSpace: 'nowrap' }} onClick={ () => openCarouseltemsModal('search') } >
-                                            <p>
-                                                <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        viewBox="0 0 24 24"
-                                                        height="24px"
-                                                        width="24px">
-                                                    <path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
-                                                </svg>
-                                            </p>&nbsp;
-                                            { __('Configure a search', 'tainacan') } 
-                                        </Button>
-                                        :
-                                        <ToolbarButton onClick={ () => openCarouseltemsModal('search') } >
-                                            <p>
-                                                <svg
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                        viewBox="0 0 24 24"
-                                                        height="24px"
-                                                        width="24px">
-                                                    <path d="M16,6H12a2,2,0,0,0-2,2v6.52A6,6,0,0,1,12,19a6,6,0,0,1-.73,2.88A1.92,1.92,0,0,0,12,22h8a2,2,0,0,0,2-2V12Zm-1,6V7.5L19.51,12ZM15,2V4H8v9.33A5.8,5.8,0,0,0,6,13V4A2,2,0,0,1,8,2ZM10.09,19.05,7,22.11V16.05L8,17l2,2ZM5,16.05v6.06L2,19.11Z"/>
-                                                </svg>
-                                            </p>&nbsp;
-                                            { __('Configure a search', 'tainacan') } 
-                                        </ToolbarButton>
-                                    )
-                                }
-                            </ToolbarGroup>
                         }
                     </BlockControls>
                 : null }

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, ToolbarGroup, ToolbarButton, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
+const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, Toolbar, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
@@ -10,6 +10,7 @@ import DynamicItemsModal from './dynamic-items-modal.js';
 import tainacan from '../../js/axios.js';
 import axios from 'axios';
 import qs from 'qs';
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 
 registerBlockType('tainacan/dynamic-items-list', {
     title: __('Tainacan Collection\'s Items List', 'tainacan'),
@@ -483,49 +484,17 @@ registerBlockType('tainacan/dynamic-items-list', {
                     <BlockControls>
                         <Toolbar controls={ layoutControls } />
                         { items.length ? 
-                            tainacan_blocks.wp_version < '5.4' ?
+                            TainacanBlocksCompatToolbar({
-                                <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ openDynamicItemsModal } >
+                                label: __('Configure search', 'tainacan'),
-                                    <p style={{ margin: 0 }}>
+                                icon: <svg
-                                                <svg
                                             xmlns="http://www.w3.org/2000/svg"
-                                                viewBox="0 0 24 24"
+                                            viewBox="0 -2 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>
+                                    </svg>,
-                                    </p>&nbsp;
+                                onClick: openDynamicItemsModal
-                                    {__('Configure search', 'tainacan')}  
+                            })
-                                </Button>
-                                : 
-                                <ToolbarGroup>
-                                    { tainacan_blocks.wp_version < '5.5' ?
-                                        <Button style={{ whiteSpace: 'nowrap' }} onClick={ openDynamicItemsModal }>
-                                            <p style={{ margin: 0 }}>
-                                                <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')}  
-                                        </Button>
-                                        :
-                                        <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>
-                                    }
-                                </ToolbarGroup>
                         : null }
                     </BlockControls>
                 </div>

src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js

@@ -13,14 +13,13 @@ const {
     Spinner,
     ToggleControl,
     Placeholder,
-    PanelBody,
+    PanelBody
-    ToolbarGroup,
-    ToolbarButton
 } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
 import tainacan from '../../js/axios.js';
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 import CollectionModal from '../../tainacan-facets/faceted-search/collection-modal.js';
 
 registerBlockType('tainacan/item-submission-form', {
@@ -275,10 +274,10 @@ registerBlockType('tainacan/item-submission-form', {
 
                     { collectionId != undefined ? 
                         <BlockControls>
-                            { tainacan_blocks.wp_version < '5.4' ?
+                           {
-                                <Button style={{ whiteSpace: 'nowrap', height: '2.3rem', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ () => openCollectionModal() }>
+                                TainacanBlocksCompatToolbar({
-                                    <p>
+                                    label: __('Change target collection', 'tainacan'),
-                                        <svg 
+                                    icon: <svg 
                                                 xmlns="http://www.w3.org/2000/svg" 
                                                 viewBox="-2 -2 12 12"
                                                 height="24px"
@@ -286,44 +285,9 @@ registerBlockType('tainacan/item-submission-form', {
                                             <g transform="translate(227.4751,-183.8442)">
                                                 <path d="m -227.47379,191.95102 c 0.0372,-2.35931 -0.0195,-4.71936 0.0185,-7.07842 0.0356,-0.55424 0.52604,-0.99051 1.07473,-0.99702 0.80102,-0.0806 1.607,0.0149 2.41027,-0.0211 1.66482,0.0101 3.33138,-0.0202 4.99509,0.01 0.58652,0.0617 1.0108,0.60434 0.99243,1.1815 0.0416,0.76157 -0.0361,1.52426 0.008,2.28649 0.0113,1.65577 -0.006,3.31214 -0.009,4.96756 -0.0429,0.59366 -0.57833,1.06966 -1.17191,1.04765 -0.92086,0.0516 -1.84377,-0.0208 -2.7657,-0.006 -1.49072,-0.0194 -2.98293,0.0353 -4.47258,0.009 -0.60954,-0.039 -1.111,-0.56284 -1.07768,-1.17994 -0.004,-0.0728 -0.004,-0.1462 -0.002,-0.21867 z m 1.15668,0.28162 c 2.40388,0 4.80776,0 7.21164,0 0,-2.41394 0,-4.82787 0,-7.24181 -2.40388,0 -4.80776,0 -7.21164,0 0,2.41394 0,4.82787 0,7.24181 z m 0.53308,-0.53308 c 0,-0.83147 0,-1.66293 0,-2.4944 0.82476,0 1.64953,0 2.47429,0 0,0.83147 0,1.66293 0,2.4944 -0.82476,0 -1.64953,0 -2.47429,0 z m 2.45417,-6.18571 c 0,0.83482 0,1.66964 0,2.50446 -0.82141,0 -1.64282,0 -2.46423,0 0,-0.83482 0,-1.66964 0,-2.50446 0.82141,0 1.64282,0 2.46423,0 z m 1.1768,1.67969 c 0,-0.28833 0,-0.57666 0,-0.86499 0.82811,0 1.65623,0 2.48434,0 0,0.28833 0,0.57666 0,0.86499 -0.82811,0 -1.65623,0 -2.48434,0 z m 2.48434,2.76598 c 0,0.28162 0,0.56325 0,0.84487 -0.82811,0 -1.65623,0 -2.48434,0 0,-0.28162 0,-0.56325 0,-0.84487 0.82811,0 1.65623,0 2.48434,0 z m -5.64258,-2.49441 c 0.48614,0 0.97228,0 1.45842,0 0,-0.47273 0,-0.94546 0,-1.41819 -0.48614,0 -0.97228,0 -1.45842,0 0,0.47273 0,0.94546 0,1.41819 z m 0,3.68126 c 0.48949,0 0.97899,0 1.46848,0 0,-0.47273 0,-0.94546 0,-1.41819 -0.48949,0 -0.97899,0 -1.46848,0 0,0.47273 0,0.94546 0,1.41819 z"></path>
                                             </g>
-                                        </svg>
+                                        </svg>,
-                                    </p>&nbsp;
+                                    onClick: openCollectionModal
-                                    { __('Change target collection', 'tainacan') }
+                                })
-                                </Button>
-                                :
-                                <ToolbarGroup>
-                                    { tainacan_blocks.wp_version < '5.5' ?
-                                        <Button style={{ whiteSpace: 'nowrap' }} onClick={ () => openCollectionModal() }>
-                                            <p>
-                                                <svg 
-                                                        xmlns="http://www.w3.org/2000/svg" 
-                                                        viewBox="-2 -2 12 12"
-                                                        height="24px"
-                                                        width="24px">
-                                                    <g transform="translate(227.4751,-183.8442)">
-                                                        <path d="m -227.47379,191.95102 c 0.0372,-2.35931 -0.0195,-4.71936 0.0185,-7.07842 0.0356,-0.55424 0.52604,-0.99051 1.07473,-0.99702 0.80102,-0.0806 1.607,0.0149 2.41027,-0.0211 1.66482,0.0101 3.33138,-0.0202 4.99509,0.01 0.58652,0.0617 1.0108,0.60434 0.99243,1.1815 0.0416,0.76157 -0.0361,1.52426 0.008,2.28649 0.0113,1.65577 -0.006,3.31214 -0.009,4.96756 -0.0429,0.59366 -0.57833,1.06966 -1.17191,1.04765 -0.92086,0.0516 -1.84377,-0.0208 -2.7657,-0.006 -1.49072,-0.0194 -2.98293,0.0353 -4.47258,0.009 -0.60954,-0.039 -1.111,-0.56284 -1.07768,-1.17994 -0.004,-0.0728 -0.004,-0.1462 -0.002,-0.21867 z m 1.15668,0.28162 c 2.40388,0 4.80776,0 7.21164,0 0,-2.41394 0,-4.82787 0,-7.24181 -2.40388,0 -4.80776,0 -7.21164,0 0,2.41394 0,4.82787 0,7.24181 z m 0.53308,-0.53308 c 0,-0.83147 0,-1.66293 0,-2.4944 0.82476,0 1.64953,0 2.47429,0 0,0.83147 0,1.66293 0,2.4944 -0.82476,0 -1.64953,0 -2.47429,0 z m 2.45417,-6.18571 c 0,0.83482 0,1.66964 0,2.50446 -0.82141,0 -1.64282,0 -2.46423,0 0,-0.83482 0,-1.66964 0,-2.50446 0.82141,0 1.64282,0 2.46423,0 z m 1.1768,1.67969 c 0,-0.28833 0,-0.57666 0,-0.86499 0.82811,0 1.65623,0 2.48434,0 0,0.28833 0,0.57666 0,0.86499 -0.82811,0 -1.65623,0 -2.48434,0 z m 2.48434,2.76598 c 0,0.28162 0,0.56325 0,0.84487 -0.82811,0 -1.65623,0 -2.48434,0 0,-0.28162 0,-0.56325 0,-0.84487 0.82811,0 1.65623,0 2.48434,0 z m -5.64258,-2.49441 c 0.48614,0 0.97228,0 1.45842,0 0,-0.47273 0,-0.94546 0,-1.41819 -0.48614,0 -0.97228,0 -1.45842,0 0,0.47273 0,0.94546 0,1.41819 z m 0,3.68126 c 0.48949,0 0.97899,0 1.46848,0 0,-0.47273 0,-0.94546 0,-1.41819 -0.48949,0 -0.97899,0 -1.46848,0 0,0.47273 0,0.94546 0,1.41819 z"></path>
-                                                    </g>
-                                                </svg>
-                                            </p>&nbsp;
-                                            { __('Change target collection', 'tainacan') }
-                                        </Button>
-                                        :
-                                        <ToolbarButton onClick={ () => openCollectionModal() }>
-                                            <p>
-                                                <svg 
-                                                        xmlns="http://www.w3.org/2000/svg" 
-                                                        viewBox="-2 -2 12 12"
-                                                        height="24px"
-                                                        width="24px">
-                                                    <g transform="translate(227.4751,-183.8442)">
-                                                        <path d="m -227.47379,191.95102 c 0.0372,-2.35931 -0.0195,-4.71936 0.0185,-7.07842 0.0356,-0.55424 0.52604,-0.99051 1.07473,-0.99702 0.80102,-0.0806 1.607,0.0149 2.41027,-0.0211 1.66482,0.0101 3.33138,-0.0202 4.99509,0.01 0.58652,0.0617 1.0108,0.60434 0.99243,1.1815 0.0416,0.76157 -0.0361,1.52426 0.008,2.28649 0.0113,1.65577 -0.006,3.31214 -0.009,4.96756 -0.0429,0.59366 -0.57833,1.06966 -1.17191,1.04765 -0.92086,0.0516 -1.84377,-0.0208 -2.7657,-0.006 -1.49072,-0.0194 -2.98293,0.0353 -4.47258,0.009 -0.60954,-0.039 -1.111,-0.56284 -1.07768,-1.17994 -0.004,-0.0728 -0.004,-0.1462 -0.002,-0.21867 z m 1.15668,0.28162 c 2.40388,0 4.80776,0 7.21164,0 0,-2.41394 0,-4.82787 0,-7.24181 -2.40388,0 -4.80776,0 -7.21164,0 0,2.41394 0,4.82787 0,7.24181 z m 0.53308,-0.53308 c 0,-0.83147 0,-1.66293 0,-2.4944 0.82476,0 1.64953,0 2.47429,0 0,0.83147 0,1.66293 0,2.4944 -0.82476,0 -1.64953,0 -2.47429,0 z m 2.45417,-6.18571 c 0,0.83482 0,1.66964 0,2.50446 -0.82141,0 -1.64282,0 -2.46423,0 0,-0.83482 0,-1.66964 0,-2.50446 0.82141,0 1.64282,0 2.46423,0 z m 1.1768,1.67969 c 0,-0.28833 0,-0.57666 0,-0.86499 0.82811,0 1.65623,0 2.48434,0 0,0.28833 0,0.57666 0,0.86499 -0.82811,0 -1.65623,0 -2.48434,0 z m 2.48434,2.76598 c 0,0.28162 0,0.56325 0,0.84487 -0.82811,0 -1.65623,0 -2.48434,0 0,-0.28162 0,-0.56325 0,-0.84487 0.82811,0 1.65623,0 2.48434,0 z m -5.64258,-2.49441 c 0.48614,0 0.97228,0 1.45842,0 0,-0.47273 0,-0.94546 0,-1.41819 -0.48614,0 -0.97228,0 -1.45842,0 0,0.47273 0,0.94546 0,1.41819 z m 0,3.68126 c 0.48949,0 0.97899,0 1.46848,0 0,-0.47273 0,-0.94546 0,-1.41819 -0.48949,0 -0.97899,0 -1.46848,0 0,0.47273 0,0.94546 0,1.41819 z"></path>
-                                                    </g>
-                                                </svg>
-                                            </p>&nbsp;
-                                            { __('Change target collection', 'tainacan') }
-                                        </ToolbarButton>
-                                    }
-                                </ToolbarGroup>
                             }
                         </BlockControls>
                     : null }

src/views/gutenberg-blocks/tainacan-items/items-list/index.js

@@ -2,10 +2,11 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { RangeControl, IconButton, Button, ToggleControl, Placeholder, Toolbar, ToolbarGroup, PanelBody, ToolbarButton } = wp.components;
+const { RangeControl, IconButton, Button, ToggleControl, Placeholder, Toolbar, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 import ItemsModal from './items-modal.js';
 
 registerBlockType('tainacan/items-list', {
@@ -226,43 +227,15 @@ registerBlockType('tainacan/items-list', {
                     <BlockControls>
                         <Toolbar controls={ layoutControls } />
                         { selectedItemsHTML.length ?
-                             tainacan_blocks.wp_version < '5.4' ?
+                            TainacanBlocksCompatToolbar({
-                                <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ openItemsModal } >
+                                label: __( 'Add more items', 'tainacan' ),
-                                    <p style={{ margin: 0 }}>
+                                icon: <svg width="24" height="24" viewBox="0 -2 12 16">
-                                        <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>
+                                    </svg>,
-                                    </p>&nbsp;
+                                onClick: openItemsModal
-                                    {  __( 'Add more items', 'tainacan' ) }
+                            })
-                                </Button>
-                                : 
-                                <ToolbarGroup>
-                                    { tainacan_blocks.wp_version < '5.5' ?
-                                        <Button style={{ whiteSpace: 'nowrap' }} 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' ) }
-                                        </Button>
-                                        :
-                                        <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>
-                                    }
-                                </ToolbarGroup>
                         : null }
                     </BlockControls>
                 </div>

src/views/gutenberg-blocks/tainacan-items/search-bar/index.js

@@ -2,10 +2,11 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { RangeControl, TextControl, Toolbar, ToolbarGroup, ToolbarButton, SelectControl, Button, ToggleControl, Placeholder, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
+const { RangeControl, TextControl, Toolbar, SelectControl, Button, ToggleControl, Placeholder, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 import SearchBarModal from './search-bar-modal.js';
 
 registerBlockType('tainacan/search-bar', {
@@ -319,13 +320,10 @@ registerBlockType('tainacan/search-bar', {
                 <div>
                     <BlockControls>
                         <Toolbar controls={ alignmentControls } />
-                        { collectionId ? (
+                        { collectionId ?
-                            tainacan_blocks.wp_version < '5.4' ?
+                            TainacanBlocksCompatToolbar({
-                                <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ () => openSearchBarModal() } >
+                                label:__('Configure search source', 'tainacan'),
-                                    <p style={{ margin: 0 }}>
+                                icon: <svg width="24" height="24" viewBox="-2 -4 20 20">
-                                        <span class="icon">
-                                            <i>
-                                                <svg width="24" height="24" viewBox="-2 -4 20 20">
                                         <path d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
                                             c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
                                             c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
@@ -333,56 +331,10 @@ registerBlockType('tainacan/search-bar', {
                                             C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
                                             c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
                                             c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>       
-                                                </svg>
+                                    </svg>,
-                                            </i> 
+                                onClick: openSearchBarModal
-                                        </span>
+                            })
-                                    </p>&nbsp;
+                        : null }
-                                    {__('Configure search source', 'tainacan')}   
-                                </Button>
-                                : 
-                                <ToolbarGroup>
-                                    { tainacan_blocks.wp_version < '5.5' ?
-                                        <Button style={{ whiteSpace: 'nowrap' }} onClick={ () => openSearchBarModal() }>
-                                            <p>
-                                                <span class="icon">
-                                                    <i>
-                                                        <svg width="24" height="24" viewBox="-2 -4 20 20">
-                                                            <path d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
-                                                                c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
-                                                                c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
-                                                                c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
-                                                                C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
-                                                                c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
-                                                                c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>       
-                                                        </svg>
-                                                    </i> 
-                                                </span>
-                                            </p>&nbsp;
-                                            {__('Configure search source', 'tainacan')}   
-                                        </Button>
-                                        :
-                                        <ToolbarButton onClick={ () => openSearchBarModal() }>
-                                            <p>
-                                                <span class="icon">
-                                                    <i>
-                                                        <svg width="24" height="24" viewBox="-2 -4 20 20">
-                                                            <path d="M0,5.8C0,5,0.2,4.2,0.5,3.5s0.7-1.3,1.2-1.8s1.1-0.9,1.8-1.2C4.2,0.1,5,0,5.8,0S7.3,0.1,8,0.5
-                                                                c0.7,0.3,1.3,0.7,1.8,1.2s0.9,1.1,1.2,1.8c0.5,1.2,0.5,2.5,0.2,3.7c0,0.2-0.1,0.4-0.2,0.6c0,0.1-0.2,0.6-0.2,0.6
-                                                                c0.6,0.6,1.3,1.3,1.9,1.9c0.7,0.7,1.3,1.3,2,2c0,0,0.3,0.2,0.3,0.3c0,0.3-0.1,0.7-0.3,1c-0.2,0.6-0.8,1-1.4,1.2
-                                                                c-0.1,0-0.6,0.2-0.6,0.1c0,0-4.2-4.2-4.2-4.2c0,0-0.8,0.3-0.8,0.4c-1.3,0.4-2.8,0.5-4.1-0.1c-0.7-0.3-1.3-0.7-1.8-1.2
-                                                                C1.2,9.3,0.8,8.7,0.5,8S0,6.6,0,5.8z M1.6,5.8c0,0.4,0.1,0.9,0.2,1.3C2.1,8.2,3,9.2,4.1,9.6c0.5,0.2,1,0.3,1.6,0.3
-                                                                c0.6,0,1.1-0.1,1.6-0.3C8.7,9,9.7,7.6,9.8,6c0.1-1.5-0.6-3.1-2-3.9c-0.9-0.5-2-0.6-3-0.4C4.6,1.8,4.4,1.9,4.1,2
-                                                                c-0.5,0.2-1,0.5-1.4,0.9C2,3.7,1.6,4.7,1.6,5.8z"/>       
-                                                        </svg>
-                                                    </i> 
-                                                </span>
-                                            </p>&nbsp;
-                                            {__('Configure search source', 'tainacan')}   
-                                        </ToolbarButton>
-                                    }
-                                </ToolbarGroup>
-                            ): null
-                        }
                     </BlockControls> 
                 </div>
  

src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js

@@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody, ToolbarGroup, ToolbarButton } = wp.components;
+const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
@@ -10,6 +10,7 @@ import TermsModal from '../terms-list/terms-modal.js';
 import tainacan from '../../js/axios.js';
 import axios from 'axios';
 import qs from 'qs';
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 
 registerBlockType('tainacan/carousel-terms-list', {
     title: __('Tainacan Terms Carousel', 'tainacan'),
@@ -308,49 +309,18 @@ registerBlockType('tainacan/carousel-terms-list', {
 
                 { terms.length ?
                     <BlockControls>
-                        { tainacan_blocks.wp_version < '5.4' ?
+                        {
-                            <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ () => openCarouselModal() } >
+                            TainacanBlocksCompatToolbar({
-                                <p style={{ margin: 0 }}>
+                                label: __('Add more terms', 'tainacan'),
-                                    <svg
+                                icon: <svg
                                             xmlns="http://www.w3.org/2000/svg"
-                                            viewBox="0 0 24 24"
+                                            viewBox="0 -2 24 24"
                                             height="24px"
                                             width="24px">
                                         <path d="M21.43,14.64,19.32,17a2.57,2.57,0,0,1-2,1H12.05a6,6,0,0,0-6-6H6V10.64A2.59,2.59,0,0,1,8.59,8H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,14.64ZM4,4A2,2,0,0,0,2,6v7.63a5.74,5.74,0,0,1,2-1.2V6H16V4ZM7,15.05v6.06l3.06-3.06ZM5,21.11V15.05L1.94,18.11Z"/>
-                                    </svg>
+                                    </svg>,
-                                </p>&nbsp;
+                                onClick: openCarouselModal
-                                { __('Add more terms', 'tainacan') } 
+                            })
-                            </Button>
-                            : 
-                            <ToolbarGroup>
-                                { tainacan_blocks.wp_version < '5.5' ?
-                                    <Button style={{ whiteSpace: 'nowrap' }} onClick={ () => openCarouselModal() } >
-                                        <p>
-                                            <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    viewBox="0 0 24 24"
-                                                    height="24px"
-                                                    width="24px">
-                                                <path d="M21.43,14.64,19.32,17a2.57,2.57,0,0,1-2,1H12.05a6,6,0,0,0-6-6H6V10.64A2.59,2.59,0,0,1,8.59,8H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,14.64ZM4,4A2,2,0,0,0,2,6v7.63a5.74,5.74,0,0,1,2-1.2V6H16V4ZM7,15.05v6.06l3.06-3.06ZM5,21.11V15.05L1.94,18.11Z"/>
-                                            </svg>
-                                        </p>&nbsp;
-                                        { __('Add more terms', 'tainacan') } 
-                                    </Button>
-                                    :
-                                    <ToolbarButton onClick={ () => openCarouselModal() } >
-                                        <p>
-                                            <svg
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                    viewBox="0 0 24 24"
-                                                    height="24px"
-                                                    width="24px">
-                                                <path d="M21.43,14.64,19.32,17a2.57,2.57,0,0,1-2,1H12.05a6,6,0,0,0-6-6H6V10.64A2.59,2.59,0,0,1,8.59,8H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,14.64ZM4,4A2,2,0,0,0,2,6v7.63a5.74,5.74,0,0,1,2-1.2V6H16V4ZM7,15.05v6.06l3.06-3.06ZM5,21.11V15.05L1.94,18.11Z"/>
-                                            </svg>
-                                        </p>&nbsp;
-                                        { __('Add more terms', 'tainacan') } 
-                                    </ToolbarButton>
-                                }
-                            </ToolbarGroup>
                         }
                     </BlockControls>
                 : null }

src/views/gutenberg-blocks/tainacan-terms/terms-list/index.js

@@ -2,10 +2,11 @@ const { registerBlockType } = wp.blocks;
 
 const { __ } = wp.i18n;
 
-const { IconButton, Button, ToggleControl, Placeholder, Toolbar, ToolbarGroup, PanelBody, ToolbarButton } = wp.components;
+const { IconButton, Button, ToggleControl, Placeholder, Toolbar, PanelBody } = wp.components;
 
 const { InspectorControls, BlockControls } = wp.editor;
 
+import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
 import TermsModal from './terms-modal.js';
 
 registerBlockType('tainacan/terms-list', {
@@ -216,40 +217,14 @@ registerBlockType('tainacan/terms-list', {
                     <BlockControls>
                         <Toolbar controls={ layoutControls } />
                         { selectedTermsHTML.length ?
-                            tainacan_blocks.wp_version < '5.4' ?
+                            TainacanBlocksCompatToolbar({
-                                <Button style={{ whiteSpace: 'nowrap', alignItems: 'center', borderTop: '1px solid #b5bcc2' }} onClick={ openTermsModal } >
+                                label: __( 'Select terms', 'tainacan' ),
-                                    <p style={{ margin: 0 }}>
+                                icon: <svg width="24" height="24" viewBox="0 -3 12 17">
-                                        <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>
+                                    </svg>,
-                                    </p>&nbsp;
+                                onClick: openTermsModal
-                                    {  __( 'Select terms', 'tainacan' ) }
+                            })
-                                </Button>
-                                : 
-                                <ToolbarGroup>
-                                    { tainacan_blocks.wp_version < '5.5' ?
-                                        <Button style={{ whiteSpace: 'nowrap' }} 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' ) }
-                                        </Button>
-                                        :
-                                        <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>
-                                    }
-                                </ToolbarGroup>
                         : null }
                     </BlockControls>
                 </div>

webpack.common.js

@@ -35,7 +35,7 @@ module.exports = {
         block_carousel_terms_list: './src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js',
         block_carousel_terms_list_theme: './src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.js',
 
-        tainacan_blocks_category_icon: './src/views/gutenberg-blocks/tainacan-blocks-category-icon.js'
+        tainacan_blocks_category_icon: './src/views/gutenberg-blocks/js/tainacan-blocks-category-icon.js'
     },
     output: {
         path: path.resolve(__dirname, './src/assets/js/'),