Bootstrap the widgets screen design (#14612)

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

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' );

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',

lib/widgets-page.php

@@ -12,7 +12,7 @@
  */
 function the_gutenberg_widgets() {
 	?>
-	<div class="blocks-widgets-container">
+	<div id="widgets-editor" class="blocks-widgets-container">
 	</div>
 	<?php
 }
@@ -29,6 +29,10 @@ function gutenberg_widgets_init( $hook ) {
 			return;
 	}
 
+	wp_add_inline_script(
+		'wp-edit-widgets',
+		'wp.editWidgets.initialize( "widgets-editor" );'
+	);
 	wp_enqueue_script( 'wp-edit-widgets' );
 	wp_enqueue_style( 'wp-edit-widgets' );
 }

packages/edit-widgets/package.json

@@ -22,7 +22,10 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.0.0",
-		"@wordpress/element": "file:../element"
+		"@wordpress/block-editor": "file:../block-editor",
+		"@wordpress/components": "file:../components",
+		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n"
 	},
 	"publishConfig": {
 		"access": "public"

packages/edit-widgets/src/components/header/index.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function Header() {
+	return (
+		<div
+			className="edit-widgets-header"
+			role="region"
+			aria-label={ __( 'Widgets screen top bar' ) }
+			tabIndex="-1"
+		>
+			<h1 className="edit-widgets-header__title">
+				{ __( 'Block Areas' ) } { __( '(experimental)' ) }
+			</h1>
+
+			<div className="edit-widgets-header__actions">
+				<Button isPrimary isLarge>
+					{ __( 'Update' ) }
+				</Button>
+			</div>
+		</div>
+	);
+}
+
+export default Header;

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;
+}

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 (
+		<Fragment>
+			<Header />
+			<Sidebar />
+			<div
+				className="edit-widgets-layout__content"
+				role="region"
+				aria-label={ __( 'Widgets screen content' ) }
+				tabIndex="-1"
+			>
+				{ areas.map( ( area, index ) => (
+					<div key={ index } className="edit-widgets-layout__area">
+						<WidgetArea title={ area } initialOpen={ index === 0 } />
+					</div>
+				) ) }
+			</div>
+		</Fragment>
+	);
+}
+
+export default navigateRegions( Layout );

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;
+}

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 (
+		<div
+			className="edit-widgets-sidebar"
+			role="region"
+			aria-label={ __( 'Widgets advanced settings' ) }
+			tabIndex="-1"
+		>
+			<Panel header={ __( 'Block Areas' ) } />
+		</div>
+	);
+}
+
+export default Sidebar;

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;
+		}
+	}
+}

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 (
+		<Panel>
+			<PanelBody
+				title={ title }
+				initialOpen={ initialOpen }
+			>
+				<BlockEditorProvider
+					value={ blocks }
+					onInput={ updateBlocks }
+					onChange={ updateBlocks }
+				>
+					<BlockList />
+				</BlockEditorProvider>
+			</PanelBody>
+		</Panel>
+	);
+}
+
+export default WidgetArea;

packages/edit-widgets/src/index.js

@@ -2,8 +2,22 @@
  * WordPress dependencies
  */
 import { render } from '@wordpress/element';
+import { registerCoreBlocks } from '@wordpress/block-library';
 
-render(
-	<h1>Widgets (beta)</h1>,
-	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(
+		<Layout />,
+		document.getElementById( id )
+	);
+}

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%;
+	}
 }