diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 6b292f4506d49a..0fc5fc439eefd5 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -161,11 +161,14 @@ export default compose( [ getBlockRootClientId, hasInserterItems, __experimentalGetAllowedBlocks, + getBlockSelectionEnd, } = select( 'core/block-editor' ); const { getBlockVariations } = select( 'core/blocks' ); rootClientId = - rootClientId || getBlockRootClientId( clientId ) || undefined; + rootClientId || + getBlockRootClientId( clientId || getBlockSelectionEnd() ) || + undefined; const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId ); diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index cc2d9174f78232..c945e2bf99a70a 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -46,6 +46,7 @@ @import "./text-columns/editor.scss"; @import "./verse/editor.scss"; @import "./video/editor.scss"; +@import "./widget-area/editor.scss"; /** * Import styles from internal editor components used by the blocks. diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 1af6c150e3f136..0851b0384db1ed 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -61,6 +61,7 @@ import * as tagCloud from './tag-cloud'; import * as classic from './classic'; import * as socialLinks from './social-links'; import * as socialLink from './social-link'; +import * as widgetArea from './widget-area'; // Full Site Editing Blocks import * as siteTitle from './site-title'; @@ -191,6 +192,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = } = settings; [ + widgetArea, __experimentalEnableLegacyWidgetBlock ? legacyWidget : null, navigation, navigationLink, diff --git a/packages/block-library/src/widget-area/block.json b/packages/block-library/src/widget-area/block.json new file mode 100644 index 00000000000000..a2fb33525d5ba9 --- /dev/null +++ b/packages/block-library/src/widget-area/block.json @@ -0,0 +1,12 @@ +{ + "name": "core/widget-area", + "category": "widgets", + "attributes": { + "id": { + "type": "string" + }, + "name": { + "type": "string" + } + } +} diff --git a/packages/block-library/src/widget-area/edit/index.js b/packages/block-library/src/widget-area/edit/index.js new file mode 100644 index 00000000000000..f25273433dcceb --- /dev/null +++ b/packages/block-library/src/widget-area/edit/index.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { EntityProvider } from '@wordpress/core-data'; +import { Panel, PanelBody } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import WidgetAreaInnerBlocks from './inner-blocks'; + +export default function WidgetAreaEdit( { + clientId, + className, + attributes: { id, name }, +} ) { + const index = useSelect( + ( select ) => select( 'core/block-editor' ).getBlockIndex( clientId ), + [ clientId ] + ); + return ( + + + + + + + + ); +} diff --git a/packages/block-library/src/widget-area/edit/inner-blocks.js b/packages/block-library/src/widget-area/edit/inner-blocks.js new file mode 100644 index 00000000000000..c7568f34d91e10 --- /dev/null +++ b/packages/block-library/src/widget-area/edit/inner-blocks.js @@ -0,0 +1,21 @@ +/** + * WordPress dependencies + */ +import { useEntityBlockEditor } from '@wordpress/core-data'; +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function WidgetAreaInnerBlocks() { + const [ blocks, onInput, onChange ] = useEntityBlockEditor( + 'root', + 'widgetArea' + ); + return ( + + ); +} diff --git a/packages/block-library/src/widget-area/editor.scss b/packages/block-library/src/widget-area/editor.scss new file mode 100644 index 00000000000000..7570743c4b3d35 --- /dev/null +++ b/packages/block-library/src/widget-area/editor.scss @@ -0,0 +1,7 @@ +.wp-block[data-type="core/widget-area"] { + max-width: $widget-area-width; +} + +.wp-block-widget-area > .components-panel__body > .block-editor-inner-blocks { + padding-top: $grid-unit-30; +} diff --git a/packages/block-library/src/widget-area/index.js b/packages/block-library/src/widget-area/index.js new file mode 100644 index 00000000000000..98b3ee8de4aa08 --- /dev/null +++ b/packages/block-library/src/widget-area/index.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + title: __( 'Widget Area' ), + description: __( 'A widget area container.' ), + supports: { + html: false, + inserter: false, + customClassName: false, + }, + __experimentalLabel: ( { name: label } ) => label, + edit, +}; diff --git a/packages/e2e-tests/fixtures/blocks/core__widget-area.html b/packages/e2e-tests/fixtures/blocks/core__widget-area.html new file mode 100644 index 00000000000000..3d2e16369b8194 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__widget-area.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__widget-area.json b/packages/e2e-tests/fixtures/blocks/core__widget-area.json new file mode 100644 index 00000000000000..578fdf0f1ab758 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__widget-area.json @@ -0,0 +1,10 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/widget-area", + "isValid": true, + "attributes": {}, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__widget-area.parsed.json b/packages/e2e-tests/fixtures/blocks/core__widget-area.parsed.json new file mode 100644 index 00000000000000..930bf95031a0fe --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__widget-area.parsed.json @@ -0,0 +1,18 @@ +[ + { + "blockName": "core/widget-area", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__widget-area.serialized.html b/packages/e2e-tests/fixtures/blocks/core__widget-area.serialized.html new file mode 100644 index 00000000000000..3d2e16369b8194 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__widget-area.serialized.html @@ -0,0 +1 @@ + diff --git a/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/index.js b/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/index.js index b4abe1296faaa1..7857b2722eccbd 100644 --- a/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/index.js +++ b/packages/edit-widgets/src/components/customizer-edit-widgets-initializer/index.js @@ -1,39 +1,28 @@ /** * WordPress dependencies */ -import { - SlotFillProvider, - Popover, - navigateRegions, -} from '@wordpress/components'; +import { navigateRegions } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useState } from '@wordpress/element'; /** * Internal dependencies */ -import WidgetAreas from '../widget-areas'; - import './sync-customizer'; +import WidgetAreasBlockEditorProvider from '../widget-areas-block-editor-provider'; +import WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content'; function CustomizerEditWidgetsInitializer( { settings } ) { - const [ selectedArea, setSelectedArea ] = useState( null ); return ( - +
- +
- - + ); } diff --git a/packages/edit-widgets/src/components/header/index.js b/packages/edit-widgets/src/components/header/index.js index 498a40fbcc4fba..49a6e2bd91e044 100644 --- a/packages/edit-widgets/src/components/header/index.js +++ b/packages/edit-widgets/src/components/header/index.js @@ -3,22 +3,29 @@ */ import { __ } from '@wordpress/i18n'; import { NavigableMenu } from '@wordpress/components'; +import { BlockNavigationDropdown, Inserter } from '@wordpress/block-editor'; /** * Internal dependencies */ -import Inserter from '../inserter'; import SaveButton from '../save-button'; import UndoButton from './undo-redo/undo'; import RedoButton from './undo-redo/redo'; +const inserterToggleProps = { isPrimary: true }; + function Header() { return (
- + +

{ __( 'Block Areas' ) } { __( '(experimental)' ) } diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss index 39acce402625e0..5248e396374cec 100644 --- a/packages/edit-widgets/src/components/header/style.scss +++ b/packages/edit-widgets/src/components/header/style.scss @@ -6,10 +6,6 @@ padding: 0 $grid-unit-20; } -.edit-widgets-inserter { - display: inline-block; -} - .edit-widgets-header__title { font-size: 16px; padding: 0 20px; diff --git a/packages/edit-widgets/src/components/inserter/index.js b/packages/edit-widgets/src/components/inserter/index.js deleted file mode 100644 index 98be1798eae047..00000000000000 --- a/packages/edit-widgets/src/components/inserter/index.js +++ /dev/null @@ -1,16 +0,0 @@ -/** - * WordPress dependencies - */ -import { createSlotFill } from '@wordpress/components'; - -const { Fill: BlockInserterFill, Slot: BlockInserterSlot } = createSlotFill( - 'EditWidgetsInserter' -); - -const Inserter = BlockInserterFill; - -Inserter.Slot = function( props ) { - return ; -}; - -export default Inserter; diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js index f9bfb3d0667e96..174bbfdd7c3233 100644 --- a/packages/edit-widgets/src/components/layout/index.js +++ b/packages/edit-widgets/src/components/layout/index.js @@ -1,84 +1,42 @@ /** * WordPress dependencies */ -import { - DropZoneProvider, - Popover, - SlotFillProvider, - FocusReturnProvider, -} from '@wordpress/components'; -import { useState } from '@wordpress/element'; -import { - BlockEditorKeyboardShortcuts, - Inserter as BlockEditorInserter, -} from '@wordpress/block-editor'; +import { Popover, Panel } from '@wordpress/components'; +import { BlockInspector } from '@wordpress/block-editor'; import { useViewportMatch } from '@wordpress/compose'; import { InterfaceSkeleton } from '@wordpress/interface'; - +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import Header from '../header'; -import Sidebar from '../sidebar'; -import WidgetAreas from '../widget-areas'; -import Notices from '../notices'; -import KeyboardShortcuts from '../keyboard-shortcuts'; -import Inserter from '../inserter'; - -const disabledInserterToggleProps = { isPrimary: true, disabled: true }; +import WidgetAreasBlockEditorProvider from '../widget-areas-block-editor-provider'; +import WidgetAreasBlockEditorContent from '../widget-areas-block-editor-content'; function Layout( { blockEditorSettings } ) { - const [ selectedArea, setSelectedArea ] = useState( null ); const isMobile = useViewportMatch( 'medium', '<' ); return ( - <> - - - - - - } - sidebar={ ! isMobile && } - content={ - <> - - - -
{ - setSelectedArea( null ); - } } - > - -
- { selectedArea === null && ( - - - - ) } - - } - /> - - - - - - + + } + sidebar={ + ! isMobile && ( +
+ + + +
+ ) + } + content={ } + /> + + ); } diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss deleted file mode 100644 index a463871e5b8c5d..00000000000000 --- a/packages/edit-widgets/src/components/layout/style.scss +++ /dev/null @@ -1,3 +0,0 @@ -.edit-widgets-layout__content { - padding: 30px 0; -} diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js deleted file mode 100644 index 73d1a34c0a813d..00000000000000 --- a/packages/edit-widgets/src/components/sidebar/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * WordPress dependencies - */ -import { createSlotFill, Panel } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; - -export const { - Fill: BlockSidebarFill, - Slot: BlockSidebarSlot, -} = createSlotFill( 'EditWidgetsBlockSidebar' ); - -function Sidebar() { - return ( -
- - - -
- ); -} - -Sidebar.Inspector = BlockSidebarFill; - -export default Sidebar; diff --git a/packages/edit-widgets/src/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss deleted file mode 100644 index 2f6f4eba27444e..00000000000000 --- a/packages/edit-widgets/src/components/sidebar/style.scss +++ /dev/null @@ -1,18 +0,0 @@ -.edit-widgets-sidebar { - width: $sidebar-width; - - > .components-panel { - margin-top: -1px; - margin-bottom: -1px; - border-left: 0; - border-right: 0; - - > .components-panel__header { - background: $light-gray-200; - } - } - - .block-editor-block-inspector__card { - margin: 0; - } -} diff --git a/packages/edit-widgets/src/components/widget-area/index.js b/packages/edit-widgets/src/components/widget-area/index.js deleted file mode 100644 index be68b58b7254ac..00000000000000 --- a/packages/edit-widgets/src/components/widget-area/index.js +++ /dev/null @@ -1,146 +0,0 @@ -/** - * External dependencies - */ -import { defaultTo } from 'lodash'; - -/** - * WordPress dependencies - */ -import { useMemo } from '@wordpress/element'; -import { uploadMedia } from '@wordpress/media-utils'; -import { Panel, PanelBody } from '@wordpress/components'; -import { - BlockInspector, - BlockEditorProvider, - BlockList, - Inserter as BlockInserter, - WritingFlow, - ObserveTyping, - BlockEditorKeyboardShortcuts, - ButtonBlockerAppender, -} from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; -import { useEntityBlockEditor, EntityProvider } from '@wordpress/core-data'; - -/** - * Internal dependencies - */ -import Sidebar from '../sidebar'; -import SelectionObserver from './selection-observer'; -import Inserter from '../inserter'; - -const inserterToggleProps = { isPrimary: true }; - -function getBlockEditorSettings( blockEditorSettings, hasUploadPermissions ) { - if ( ! hasUploadPermissions ) { - return blockEditorSettings; - } - const mediaUploadBlockEditor = ( { onError, ...argumentsObject } ) => { - uploadMedia( { - wpAllowedMimeTypes: blockEditorSettings.allowedMimeTypes, - onError: ( { message } ) => onError( message ), - ...argumentsObject, - } ); - }; - return { - ...blockEditorSettings, - mediaUpload: mediaUploadBlockEditor, - }; -} - -function WidgetAreaEditor( { - id, - initialOpen, - isSelectedArea, - onBlockSelected, - blockEditorSettings, -} ) { - const [ blocks, onInput, onChange ] = useEntityBlockEditor( - 'root', - 'widgetArea' - ); - const { widgetAreaName, hasUploadPermissions } = useSelect( - ( select ) => { - const { canUser, getEditedEntityRecord } = select( 'core' ); - const widgetArea = getEditedEntityRecord( - 'root', - 'widgetArea', - id - ); - return { - widgetAreaName: widgetArea && widgetArea.name, - hasUploadPermissions: defaultTo( - canUser( 'create', 'media' ), - true - ), - }; - }, - [ id ] - ); - const settings = useMemo( - () => - getBlockEditorSettings( blockEditorSettings, hasUploadPermissions ), - [ blockEditorSettings, hasUploadPermissions ] - ); - return ( - - -
{ - // Stop propagation of the focus event to avoid the parent - // widget layout component catching the event and removing the selected area. - event.stopPropagation(); - event.preventDefault(); - } } - > - - { isSelectedArea && ( - <> - - - - - - ) } - - - - -
- - - - - -
- -
- - - ); -} - -function WidgetArea( { id, ...props } ) { - return ( - - - - ); -} - -export default WidgetArea; diff --git a/packages/edit-widgets/src/components/widget-area/selection-observer.js b/packages/edit-widgets/src/components/widget-area/selection-observer.js deleted file mode 100644 index 3b1cdf5c378e49..00000000000000 --- a/packages/edit-widgets/src/components/widget-area/selection-observer.js +++ /dev/null @@ -1,54 +0,0 @@ -/** - * WordPress dependencies - */ -import { Component } from '@wordpress/element'; -import { compose } from '@wordpress/compose'; -import { withSelect, withDispatch } from '@wordpress/data'; - -/** - * Component which calls onBlockSelected prop when a block becomes selected. It - * can be used to ensuring that only one block appears as selected - * when multiple editors exist in a page. - * - * @type {WPComponent} - */ - -class SelectionObserver extends Component { - componentDidUpdate( prevProps ) { - const { - hasSelectedBlock, - onBlockSelected, - isSelectedArea, - clearSelectedBlock, - } = this.props; - - if ( hasSelectedBlock && ! prevProps.hasSelectedBlock ) { - onBlockSelected(); - } - - if ( ! isSelectedArea && prevProps.isSelectedArea ) { - clearSelectedBlock(); - } - } - - render() { - return null; - } -} - -export default compose( [ - withSelect( ( select ) => { - const { hasSelectedBlock } = select( 'core/block-editor' ); - - return { - hasSelectedBlock: hasSelectedBlock(), - }; - } ), - withDispatch( ( dispatch ) => { - const { clearSelectedBlock } = dispatch( 'core/block-editor' ); - - return { - clearSelectedBlock, - }; - } ), -] )( SelectionObserver ); diff --git a/packages/edit-widgets/src/components/widget-area/style.scss b/packages/edit-widgets/src/components/widget-area/style.scss deleted file mode 100644 index 248f5d4e4ff856..00000000000000 --- a/packages/edit-widgets/src/components/widget-area/style.scss +++ /dev/null @@ -1,19 +0,0 @@ -.edit-widgets-widget-area { - max-width: $widget-area-width; - margin: 0 auto 30px; - - // By default the default block appender inserter has a negative position, - // but given that on the widget screen we have 0 padding we need to remove the negative position. - .block-editor-default-block-appender .block-editor-inserter, - .block-editor-block-list__empty-block-inserter { - left: 0; - } -} -.edit-widgets-main-block-list { - padding-top: $grid-unit-30; -} - -.edit-widgets-main-block-list > div > .block-list-appender { - padding-top: $panel-padding; - position: relative; -} diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js new file mode 100644 index 00000000000000..21e91953e5bf66 --- /dev/null +++ b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js @@ -0,0 +1,46 @@ +/** + * WordPress dependencies + */ +import { Popover } from '@wordpress/components'; +import { + BlockEditorKeyboardShortcuts, + WritingFlow, + ObserveTyping, + BlockList, +} from '@wordpress/block-editor'; +import { useDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import Notices from '../notices'; +import KeyboardShortcuts from '../keyboard-shortcuts'; + +export default function WidgetAreasBlockEditorContent() { + const { clearSelectedBlock } = useDispatch( 'core/block-editor' ); + return ( + <> + + + + +
+
{ + // Stop propagation of the focus event to avoid the parent + // widget layout component catching the event and removing the selected area. + event.stopPropagation(); + event.preventDefault(); + } } + > + + + + + +
+
+ + ); +} diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js new file mode 100644 index 00000000000000..ebddb5a6e79772 --- /dev/null +++ b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js @@ -0,0 +1,96 @@ +/** + * External dependencies + */ +import { defaultTo } from 'lodash'; + +/** + * WordPress dependencies + */ +import { + DropZoneProvider, + SlotFillProvider, + FocusReturnProvider, +} from '@wordpress/components'; +import { uploadMedia } from '@wordpress/media-utils'; +import { useSelect } from '@wordpress/data'; +import { useEffect, useMemo, useState } from '@wordpress/element'; +import { createBlock } from '@wordpress/blocks'; +import { + BlockEditorProvider, + BlockEditorKeyboardShortcuts, +} from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import KeyboardShortcuts from '../keyboard-shortcuts'; + +const EMPTY_ARRAY = []; + +export default function WidgetAreasBlockEditorProvider( { + blockEditorSettings, + ...props +} ) { + const { areas, hasUploadPermissions } = useSelect( ( select ) => { + const { canUser, getEntityRecords } = select( 'core' ); + return { + areas: getEntityRecords( 'root', 'widgetArea' ) || EMPTY_ARRAY, + hasUploadPermissions: defaultTo( + canUser( 'create', 'media' ), + true + ), + }; + } ); + const [ blocks, setBlocks ] = useState( [] ); + useEffect( () => { + if ( ! areas || ! areas.length || blocks.length > 0 ) { + return; + } + setBlocks( + areas.map( ( { id, name } ) => { + return createBlock( 'core/widget-area', { + id, + name, + } ); + } ) + ); + }, [ areas, blocks ] ); + + const settings = useMemo( () => { + let mediaUploadBlockEditor; + if ( hasUploadPermissions ) { + mediaUploadBlockEditor = ( { onError, ...argumentsObject } ) => { + uploadMedia( { + wpAllowedMimeTypes: blockEditorSettings.allowedMimeTypes, + onError: ( { message } ) => onError( message ), + ...argumentsObject, + } ); + }; + } + return { + ...blockEditorSettings, + mediaUpload: mediaUploadBlockEditor, + templateLock: 'all', + }; + }, [ blockEditorSettings, hasUploadPermissions ] ); + + return ( + <> + + + + + + setBlocks( newBlocks ) } + onChange={ ( newBlocks ) => setBlocks( newBlocks ) } + settings={ settings } + { ...props } + /> + + + + + ); +} diff --git a/packages/edit-widgets/src/components/widget-areas/index.js b/packages/edit-widgets/src/components/widget-areas/index.js deleted file mode 100644 index b1171e10ac3d86..00000000000000 --- a/packages/edit-widgets/src/components/widget-areas/index.js +++ /dev/null @@ -1,40 +0,0 @@ -/** - * WordPress dependencies - */ -import { compose } from '@wordpress/compose'; -import { withSelect } from '@wordpress/data'; - -/** - * Internal dependencies - */ -import WidgetArea from '../widget-area'; - -const EMPTY_ARRAY = []; - -function WidgetAreas( { - areas, - blockEditorSettings, - selectedArea, - setSelectedArea, -} ) { - return areas.map( ( { id }, index ) => ( - setSelectedArea( index ) } - blockEditorSettings={ blockEditorSettings } - key={ id } - id={ id } - initialOpen={ index === 0 } - /> - ) ); -} - -export default compose( [ - withSelect( ( select ) => { - const { getEntityRecords } = select( 'core' ); - const areas = getEntityRecords( 'root', 'widgetArea' ) || EMPTY_ARRAY; - return { - areas, - }; - } ), -] )( WidgetAreas ); diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index 41cc5979e9dd6e..f33c2f0b367e0d 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -2,10 +2,7 @@ @import "./components/customizer-edit-widgets-initializer/style.scss"; @import "./components/header/style.scss"; -@import "./components/layout/style.scss"; @import "./components/notices/style.scss"; -@import "./components/sidebar/style.scss"; -@import "./components/widget-area/style.scss"; // In order to use mix-blend-mode, this element needs to have an explicitly set background-color // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations @@ -71,3 +68,28 @@ body.gutenberg_page_gutenberg-widgets { opacity: 1; } } + +.edit-widgets-sidebar { + width: $sidebar-width; + + > .components-panel { + margin-top: -1px; + margin-bottom: -1px; + border-left: 0; + border-right: 0; + + > .components-panel__header { + background: $light-gray-200; + } + } + + .block-editor-block-inspector__card { + margin: 0; + } +} + +.blocks-widgets-container .editor-style-wrapper { + max-width: $widget-area-width; + margin: auto; +} +