From beea27ac13cfb9fda24c93e25c6730195141688d Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Tue, 18 May 2021 12:38:04 +1000 Subject: [PATCH] Use BlockEdit and render title outside popover. --- .../src/legacy-widget/block.json | 4 --- .../src/legacy-widget/edit/form.js | 19 +++++++------ .../src/legacy-widget/edit/index.js | 8 ++++-- .../src/legacy-widget/editor.scss | 4 +++ .../sidebar-block-editor/sidebar-adapter.js | 6 ---- .../use-sidebar-block-editor.js | 3 +- .../customize-widgets/src/filters/index.js | 1 + .../src/filters/wide-widget-display.js | 28 +++++++++++++++++++ 8 files changed, 50 insertions(+), 23 deletions(-) create mode 100644 packages/customize-widgets/src/filters/wide-widget-display.js diff --git a/packages/block-library/src/legacy-widget/block.json b/packages/block-library/src/legacy-widget/block.json index a567cf793d41f..30b60c6448835 100644 --- a/packages/block-library/src/legacy-widget/block.json +++ b/packages/block-library/src/legacy-widget/block.json @@ -17,10 +17,6 @@ "instance": { "type": "object", "default": null - }, - "isWide": { - "type": "boolean", - "default": false } }, "supports": { diff --git a/packages/block-library/src/legacy-widget/edit/form.js b/packages/block-library/src/legacy-widget/edit/form.js index b40355ed4457f..b6b21cc05c9d5 100644 --- a/packages/block-library/src/legacy-widget/edit/form.js +++ b/packages/block-library/src/legacy-widget/edit/form.js @@ -76,17 +76,20 @@ export default function Form( { if ( isWide && isMediumLargeViewport ) { return ( - - ); } diff --git a/packages/block-library/src/legacy-widget/edit/index.js b/packages/block-library/src/legacy-widget/edit/index.js index b186a6434f8e0..791056dc34ccb 100644 --- a/packages/block-library/src/legacy-widget/edit/index.js +++ b/packages/block-library/src/legacy-widget/edit/index.js @@ -31,7 +31,8 @@ import NoPreview from './no-preview'; import ConvertToBlocksButton from './convert-to-blocks-button'; export default function Edit( props ) { - const { id, idBase, isWide } = props.attributes; + const { id, idBase } = props.attributes; + const { isWide = false } = props; const blockProps = useBlockProps( { className: classnames( { @@ -44,7 +45,7 @@ export default function Edit( props ) { { ! id && ! idBase ? ( ) : ( - + ) } ); @@ -85,10 +86,11 @@ function Empty( { attributes: { id, idBase }, setAttributes } ) { } function NotEmpty( { - attributes: { id, idBase, instance, isWide }, + attributes: { id, idBase, instance }, setAttributes, clientId, isSelected, + isWide, } ) { const [ hasPreview, setHasPreview ] = useState( null ); diff --git a/packages/block-library/src/legacy-widget/editor.scss b/packages/block-library/src/legacy-widget/editor.scss index 1282f2a528be1..7940d761b21d2 100644 --- a/packages/block-library/src/legacy-widget/editor.scss +++ b/packages/block-library/src/legacy-widget/editor.scss @@ -86,3 +86,7 @@ margin: 0 0 5px; font-weight: 500; } + +.wp-block-legacy-widget__container { + min-height: 30px; +} diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js b/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js index 0f39860ca51ad..5a5e06d57936b 100644 --- a/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js +++ b/packages/customize-widgets/src/components/sidebar-block-editor/sidebar-adapter.js @@ -194,11 +194,6 @@ export default class SidebarAdapter { const settingId = widgetIdToSettingId( widgetId ); const setting = this.api( settingId ); - const isWide = wp.customize.Widgets.data.availableWidgets.filter( - // eslint-disable-next-line camelcase - ( { id_base } ) => id_base === idBase - )[ 0 ].is_wide; - if ( ! setting ) { return null; } @@ -214,7 +209,6 @@ export default class SidebarAdapter { idBase, number, instance, - isWide, }; this.widgetsCache.set( instance, widget ); diff --git a/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js index 029f968f44d2f..c8b06416c45ce 100644 --- a/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js +++ b/packages/customize-widgets/src/components/sidebar-block-editor/use-sidebar-block-editor.js @@ -58,7 +58,7 @@ function blockToWidget( block, existingWidget = null ) { }; } -function widgetToBlock( { id, idBase, number, instance, isWide } ) { +function widgetToBlock( { id, idBase, number, instance } ) { let block; const { @@ -83,7 +83,6 @@ function widgetToBlock( { id, idBase, number, instance, isWide } ) { raw, ...rest, }, - isWide, } ); } else { // Widget that does not extend WP_Widget. diff --git a/packages/customize-widgets/src/filters/index.js b/packages/customize-widgets/src/filters/index.js index fdae4d488b83d..07b68a610103a 100644 --- a/packages/customize-widgets/src/filters/index.js +++ b/packages/customize-widgets/src/filters/index.js @@ -3,3 +3,4 @@ */ import './move-to-sidebar'; import './replace-media-upload'; +import './wide-widget-display'; diff --git a/packages/customize-widgets/src/filters/wide-widget-display.js b/packages/customize-widgets/src/filters/wide-widget-display.js new file mode 100644 index 0000000000000..dba0200bf01eb --- /dev/null +++ b/packages/customize-widgets/src/filters/wide-widget-display.js @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { createHigherOrderComponent } from '@wordpress/compose'; +import { addFilter } from '@wordpress/hooks'; + +const { wp } = window; + +const withWideWidgetDisplay = createHigherOrderComponent( + ( BlockEdit ) => ( props ) => { + const { idBase } = props.attributes; + const isWide = + wp && wp.customize + ? wp.customize.Widgets.data.availableWidgets.filter( + ( widget ) => widget.id_base === idBase + )[ 0 ]?.is_wide + : false; + + return ; + }, + 'withWideWidgetDisplay' +); + +addFilter( + 'editor.BlockEdit', + 'core/customize-widgets/wide-widget-display', + withWideWidgetDisplay +);