diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 3c8b921b1fce0c..733a5c3ed756e9 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -27,6 +27,7 @@ $z-layers: ( ".block-library-gallery-item__inline-menu": 20, ".block-editor-url-input__suggestions": 30, ".edit-post-header": 30, + ".edit-widgets-header": 30, ".block-library-button__inline-link .block-editor-url-input__suggestions": 6, // URL suggestions for button block above sibling inserter ".block-library-image__resize-handlers": 1, // Resize handlers above sibling inserter ".wp-block-cover__inner-container": 1, // InnerBlocks area inside cover image block @@ -64,6 +65,7 @@ $z-layers: ( // Show sidebar above wp-admin navigation bar for mobile viewports: // #wpadminbar { z-index: 99999 } ".edit-post-sidebar": 100000, + ".edit-widgets-sidebar": 100000, ".edit-post-layout .edit-post-post-publish-panel": 100001, // Show sidebar in greater than small viewports above editor related elements diff --git a/lib/client-assets.php b/lib/client-assets.php index f3ad7c7ee92dfa..1407300e91e50a 100644 --- a/lib/client-assets.php +++ b/lib/client-assets.php @@ -357,7 +357,7 @@ function gutenberg_register_scripts_and_styles() { gutenberg_override_style( 'wp-edit-widgets', gutenberg_url( 'build/edit-widgets/style.css' ), - array(), + array( 'wp-components', 'wp-block-editor', 'wp-edit-blocks' ), filemtime( gutenberg_dir_path() . 'build/edit-widgets/style.css' ) ); wp_style_add_data( 'wp-edit-widgets', 'rtl', 'replace' ); diff --git a/lib/packages-dependencies.php b/lib/packages-dependencies.php index 3bfbecc382c490..8a1f78fafe4565 100644 --- a/lib/packages-dependencies.php +++ b/lib/packages-dependencies.php @@ -155,7 +155,11 @@ 'wp-viewport', ), 'wp-edit-widgets' => array( + 'wp-block-editor', + 'wp-block-library', + 'wp-components', 'wp-element', + 'wp-i18n', ), 'wp-editor' => array( 'lodash', diff --git a/lib/widgets-page.php b/lib/widgets-page.php index 82eff09001f456..a1c6f5a84c1e11 100644 --- a/lib/widgets-page.php +++ b/lib/widgets-page.php @@ -12,7 +12,7 @@ */ function the_gutenberg_widgets() { ?> -
+
+

+ { __( 'Block Areas' ) } { __( '(experimental)' ) } +

+ +
+ +
+
+ ); +} + +export default Header; diff --git a/packages/edit-widgets/src/components/header/style.scss b/packages/edit-widgets/src/components/header/style.scss new file mode 100644 index 00000000000000..3a92df924e18c2 --- /dev/null +++ b/packages/edit-widgets/src/components/header/style.scss @@ -0,0 +1,37 @@ +.edit-widgets-header { + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid $light-gray-500; + height: $header-height; + background: $white; + z-index: z-index(".edit-widgets-header"); + + left: 0; + right: 0; + // Stick the toolbar to the top, because the admin bar is not fixed on mobile. + top: 0; + position: sticky; + + // On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container. + @include break-small { + position: fixed; + padding: $grid-size; + top: $admin-bar-height-big; + } + + @include break-medium() { + top: $admin-bar-height; + } +} +@include editor-left(".edit-widgets-header"); + +.edit-widgets-header__title { + font-size: 16px; + padding: 0 20px; + margin: 0; +} + +.edit-widgets-header__actions { + padding: 0 20px; +} diff --git a/packages/edit-widgets/src/components/layout/index.js b/packages/edit-widgets/src/components/layout/index.js new file mode 100644 index 00000000000000..1e8a2787509a25 --- /dev/null +++ b/packages/edit-widgets/src/components/layout/index.js @@ -0,0 +1,42 @@ +/** + * WordPress dependencies + */ +import { Fragment } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { navigateRegions } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import Header from '../header'; +import Sidebar from '../sidebar'; +import WidgetArea from '../widget-area'; + +function Layout() { + const areas = [ + __( 'Sidebar' ), + __( 'Footer' ), + __( 'Header' ), + ]; + + return ( + +
+ +
+ { areas.map( ( area, index ) => ( +
+ +
+ ) ) } +
+ + ); +} + +export default navigateRegions( Layout ); diff --git a/packages/edit-widgets/src/components/layout/style.scss b/packages/edit-widgets/src/components/layout/style.scss new file mode 100644 index 00000000000000..13d763798dc59d --- /dev/null +++ b/packages/edit-widgets/src/components/layout/style.scss @@ -0,0 +1,16 @@ +.edit-widgets-layout__content { + min-height: 100%; + background: #f1f1f1; + padding: 30px 0; + + // Temporarily disable the sidebar on mobile + @include break-small() { + margin-right: $sidebar-width; + margin-top: $header-height; + } +} + +.edit-widgets-layout__area { + max-width: $content-width; + margin: 0 auto 30px; +} diff --git a/packages/edit-widgets/src/components/sidebar/index.js b/packages/edit-widgets/src/components/sidebar/index.js new file mode 100644 index 00000000000000..3fe0cb0e91352f --- /dev/null +++ b/packages/edit-widgets/src/components/sidebar/index.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { Panel } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +function Sidebar() { + return ( +
+ +
+ ); +} + +export default Sidebar; diff --git a/packages/edit-widgets/src/components/sidebar/style.scss b/packages/edit-widgets/src/components/sidebar/style.scss new file mode 100644 index 00000000000000..c528439c50c9a6 --- /dev/null +++ b/packages/edit-widgets/src/components/sidebar/style.scss @@ -0,0 +1,42 @@ +.edit-widgets-sidebar { + position: fixed; + z-index: z-index(".edit-widgets-sidebar"); + top: 0; + right: 0; + bottom: 0; + width: $sidebar-width; + border-left: $border-width solid $light-gray-500; + background: $white; + color: $dark-gray-500; + height: 100vh; + overflow: hidden; + + @include break-small() { + top: $admin-bar-height-big + $header-height; + z-index: z-index(".edit-post-sidebar {greater than small}"); + height: auto; + overflow: auto; + -webkit-overflow-scrolling: touch; + } + + @include break-medium() { + top: $admin-bar-height + $header-height; + } + + // Temporarily disable the sidebar on mobile + display: none; + @include break-small() { + display: block; + } + + > .components-panel { + margin-top: -1px; + margin-bottom: -1px; + border-left: 0; + border-right: 0; + + > .components-panel__header { + background: $light-gray-200; + } + } +} diff --git a/packages/edit-widgets/src/components/widget-area/index.js b/packages/edit-widgets/src/components/widget-area/index.js new file mode 100644 index 00000000000000..5826f470756fd2 --- /dev/null +++ b/packages/edit-widgets/src/components/widget-area/index.js @@ -0,0 +1,32 @@ +/** + * WordPress dependencies + */ +import { Panel, PanelBody } from '@wordpress/components'; +import { + BlockEditorProvider, + BlockList, +} from '@wordpress/block-editor'; +import { useState } from '@wordpress/element'; + +function WidgetArea( { title, initialOpen } ) { + const [ blocks, updateBlocks ] = useState( [] ); + + return ( + + + + + + + + ); +} + +export default WidgetArea; diff --git a/packages/edit-widgets/src/index.js b/packages/edit-widgets/src/index.js index ef8ed74e9da63f..2181853fa461de 100644 --- a/packages/edit-widgets/src/index.js +++ b/packages/edit-widgets/src/index.js @@ -2,8 +2,22 @@ * WordPress dependencies */ import { render } from '@wordpress/element'; +import { registerCoreBlocks } from '@wordpress/block-library'; -render( -

Widgets (beta)

, - document.querySelector( '.blocks-widgets-container' ) -); +/** + * Internal dependencies + */ +import Layout from './components/layout'; + +/** + * Initilizes the widgets screen + * + * @param {string} id Id of the root element to render the screen. + */ +export function initialize( id ) { + registerCoreBlocks(); + render( + , + document.getElementById( id ) + ); +} diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss index 334a89c65cd622..39319c706bf674 100644 --- a/packages/edit-widgets/src/style.scss +++ b/packages/edit-widgets/src/style.scss @@ -1,3 +1,7 @@ +@import "./components/header/style.scss"; +@import "./components/layout/style.scss"; +@import "./components/sidebar/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 html.wp-toolbar { @@ -12,8 +16,27 @@ body.gutenberg_page_gutenberg-widgets { // The modals are shown outside the .blocks-widgets-container wrapper, they need these styles .components-modal__frame { @include reset; + } .blocks-widgets-container { - padding: 0 10px; + // On mobile the main content area has to scroll, otherwise you can invoke + // the overscroll bounce on the non-scrolling container, for a bad experience. + @include break-small { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + min-height: calc(100vh - #{ $admin-bar-height-big }); + } + + // The WP header height changes at this breakpoint. + @include break-medium { + min-height: calc(100vh - #{ $admin-bar-height }); + } + + > .components-navigate-regions { + height: 100%; + } }