From ee2c57795644e05f3b8b85e5fcfcd329dbc3bb29 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Mon, 30 Nov 2020 12:01:50 -0300 Subject: [PATCH] Creates TainacanBlocksCompatToolbar function and replaces ToolbarGroups usage by it. #461 --- .../{ => js}/tainacan-blocks-category-icon.js | 0 .../js/tainacan-blocks-compat-toolbar.js | 29 +++++ .../carousel-collections-list/index.js | 50 ++------ .../collections-list/index.js | 49 ++------ .../tainacan-facets/facets-list/index.js | 57 ++------- .../carousel-items-list/index.js | 115 +++++------------- .../dynamic-items-list/index.js | 57 ++------- .../item-submission-form/index.js | 54 ++------ .../tainacan-items/items-list/index.js | 49 ++------ .../tainacan-items/search-bar/index.js | 82 +++---------- .../carousel-terms-list/index.js | 50 ++------ .../tainacan-terms/terms-list/index.js | 45 ++----- webpack.common.js | 2 +- 13 files changed, 162 insertions(+), 477 deletions(-) rename src/views/gutenberg-blocks/{ => js}/tainacan-blocks-category-icon.js (100%) create mode 100644 src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js diff --git a/src/views/gutenberg-blocks/tainacan-blocks-category-icon.js b/src/views/gutenberg-blocks/js/tainacan-blocks-category-icon.js similarity index 100% rename from src/views/gutenberg-blocks/tainacan-blocks-category-icon.js rename to src/views/gutenberg-blocks/js/tainacan-blocks-category-icon.js diff --git a/src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js b/src/views/gutenberg-blocks/js/tainacan-blocks-compat-toolbar.js new file mode 100644 index 000000000..1740e5341 --- /dev/null +++ b/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' ? + + : + + { tainacan_blocks.wp_version < '5.5' ? + + : + onClick(onClickParams) }> +

+ { icon } +

  + { label } + + } + +} diff --git a/src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/index.js b/src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/index.js index 8435bccab..c65ed94f0 100644 --- a/src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/index.js +++ b/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 ? - { tainacan_blocks.wp_version < '5.4' ? - - : - - { tainacan_blocks.wp_version < '5.5' ? - - : - openCarouselModal() } > -

- - - -

  - { __('Add more collections', 'tainacan') } - - } - + , + onClick: openCarouselModal + }) } : null } 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 14e20f161..3e853412c 100644 --- a/src/views/gutenberg-blocks/tainacan-collections/collections-list/index.js +++ b/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', { { selectedCollectionsHTML.length ? - tainacan_blocks.wp_version < '5.4' ? - - : - - { tainacan_blocks.wp_version < '5.5' ? - - : - -

- - - -

  - { __( 'Select collections', 'tainacan' ) } - - } - + TainacanBlocksCompatToolbar({ + label: __( 'Select collections', 'tainacan' ), + icon: + + , + onClick: openCollectionsModal + }) : null } diff --git a/src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js b/src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js index c4cffaac1..2c389a21e 100644 --- a/src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js +++ b/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', { { facets.length ? ( - tainacan_blocks.wp_version < '5.4' ? - - : - - { tainacan_blocks.wp_version < '5.5' ? - - : - openMetadataModal() }> -

- - - -

  - {__('Select facets', 'tainacan')} - - } - + TainacanBlocksCompatToolbar({ + label: __('Select facets', 'tainacan'), + icon: + + , + onclick: openMetadataModal + }) ): null } diff --git a/src/views/gutenberg-blocks/tainacan-items/carousel-items-list/index.js b/src/views/gutenberg-blocks/tainacan-items/carousel-items-list/index.js index ab823217f..c08e3e345 100644 --- a/src/views/gutenberg-blocks/tainacan-items/carousel-items-list/index.js +++ b/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 ? - { tainacan_blocks.wp_version < '5.4' ? - loadStrategy != 'search' ? - - : - - : - - { loadStrategy != 'search' ? ( - tainacan_blocks.wp_version < '5.5' ? - - : - openCarouseltemsModal('selection') } > -

- - - -

  - { __('Add more items', 'tainacan') } - - ) : - ( tainacan_blocks.wp_version < '5.5' ? - - : - openCarouseltemsModal('search') } > -

- - - -

  - { __('Configure a search', 'tainacan') } - - ) - } - + { loadStrategy != 'search' ? + TainacanBlocksCompatToolbar({ + label: __('Add more items', 'tainacan'), + icon: + + , + onClick: openCarouseltemsModal, + onClickParams: 'selection' + }) + : + TainacanBlocksCompatToolbar({ + label: __('Configure a search', 'tainacan'), + icon: + + , + onClick: openCarouseltemsModal, + onClickParams: 'search' + }) } : 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 ce5eed535..a4f459af0 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, 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', { { items.length ? - tainacan_blocks.wp_version < '5.4' ? - - : - - { tainacan_blocks.wp_version < '5.5' ? - - : - -

- - - -

  - {__('Configure search', 'tainacan')} - - } - + TainacanBlocksCompatToolbar({ + label: __('Configure search', 'tainacan'), + icon: + + , + onClick: openDynamicItemsModal + }) : null } diff --git a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js index 85bca80a9..5d8941506 100644 --- a/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js +++ b/src/views/gutenberg-blocks/tainacan-items/item-submission-form/index.js @@ -13,14 +13,13 @@ const { Spinner, ToggleControl, Placeholder, - PanelBody, - ToolbarGroup, - ToolbarButton + PanelBody } = 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 ? - { tainacan_blocks.wp_version < '5.4' ? - - : - - { tainacan_blocks.wp_version < '5.5' ? - - : - openCollectionModal() }> -

- - - - - -

  - { __('Change target collection', 'tainacan') } - - } - + , + onClick: openCollectionModal + }) } : 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 98d1dc23a..7f102d3ec 100644 --- a/src/views/gutenberg-blocks/tainacan-items/items-list/index.js +++ b/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', { { selectedItemsHTML.length ? - tainacan_blocks.wp_version < '5.4' ? - - : - - { tainacan_blocks.wp_version < '5.5' ? - - : - -

- - - -

  - { __( 'Add more items', 'tainacan' ) } - - } - + TainacanBlocksCompatToolbar({ + label: __( 'Add more items', 'tainacan' ), + icon: + + , + onClick: openItemsModal + }) : null } diff --git a/src/views/gutenberg-blocks/tainacan-items/search-bar/index.js b/src/views/gutenberg-blocks/tainacan-items/search-bar/index.js index 58e113d24..6f29b78a2 100644 --- a/src/views/gutenberg-blocks/tainacan-items/search-bar/index.js +++ b/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,70 +320,21 @@ registerBlockType('tainacan/search-bar', {
- { collectionId ? ( - tainacan_blocks.wp_version < '5.4' ? - - : - - { tainacan_blocks.wp_version < '5.5' ? - - : - openSearchBarModal() }> -

- - - - - - - -

  - {__('Configure search source', 'tainacan')} - - } - - ): null - } + { collectionId ? + TainacanBlocksCompatToolbar({ + label:__('Configure search source', 'tainacan'), + icon: + + , + onClick: openSearchBarModal + }) + : null }
diff --git a/src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js b/src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js index eacef4916..f2645d314 100644 --- a/src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js +++ b/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 ? - { tainacan_blocks.wp_version < '5.4' ? - - : - - { tainacan_blocks.wp_version < '5.5' ? - - : - openCarouselModal() } > -

- - - -

  - { __('Add more terms', 'tainacan') } - - } - + , + onClick: openCarouselModal + }) } : 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 ed0ed5936..008fb9622 100644 --- a/src/views/gutenberg-blocks/tainacan-terms/terms-list/index.js +++ b/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', { { selectedTermsHTML.length ? - tainacan_blocks.wp_version < '5.4' ? - - : - - { tainacan_blocks.wp_version < '5.5' ? - - : - -

- - - -

  - { __( 'Select terms', 'tainacan' ) } - - } - + TainacanBlocksCompatToolbar({ + label: __( 'Select terms', 'tainacan' ), + icon: + + , + onClick: openTermsModal + }) : null } diff --git a/webpack.common.js b/webpack.common.js index 994c406a3..d9f4c3091 100644 --- a/webpack.common.js +++ b/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/'),