Bootstrap the widgets screen design #14612
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
|
There was a problem hiding this comment. A lot of these styles to properly style the sidebar and the top bar and the main area are shared with the |
||
| } | ||
| @include editor-left(".edit-widgets-header"); | ||
|
There was a problem hiding this comment. Possible future task: Is there sense in making this specific to "editor"? Or is it more about how the UI interacts with the admin sidebar more generally? |
||
|
|
||
| .edit-widgets-header__title { | ||
| font-size: 16px; | ||
| padding: 0 20px; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .edit-widgets-header__actions { | ||
| padding: 0 20px; | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = [ | ||
|
There was a problem hiding this comment. Time for our favourite past time... ✨ naming things! ✨ It looks like WordPress calls the part of the page where a group of widgets appears a "sidebar" in the code but a "Widget Area" in the documentation. Which term should we use in Gutenberg? I am thinking it would be confusing, after Phase 2 is merged into (Nothing to do with this PR—just trying to get ahead of the terminology here.) There was a problem hiding this comment. Yeah, I don't really know. I don't like "sidebars" personally as it's not really what these things are meant for but I can be on board with it for consistency. @aduth our naming expert to the rescue? :P There was a problem hiding this comment. The help text in the current widgets screen also includes some references to this concept as a "widget area", so there's certainly precedent for both cases. I assume it's likely a matter of historical legacy on the "sidebar" naming.
Phase 2 could be a good opportunity to push to adopt the "area" naming, and move away from considering these as constrained to sidebars. Consistency with existing function naming is worth considering, but I also wonder if it's not out-of-the-question to consider a soft-deprecation of existing In any case, I also agree that it needn't block merging this, especially as they're not exposed as part of a public interface (aside from the one class name). There was a problem hiding this comment. There was some conversation about this in the customizer issue as well. I went with "Block Areas" in the prototype. |
||
| __( '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 ); | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| .edit-widgets-layout__content { | ||
| min-height: 100%; | ||
| background: $light-gray-300; | ||
| 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; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
|
There was a problem hiding this comment. Is There was a problem hiding this comment. I don't really know, this is copied from the edit-post but I can test. There was a problem hiding this comment. This looks like an explicit change done for mobile here #1691 In my testing it doesn't impact to remove but given how fragile these things are, I prefer to leave and defer to @jasmussen |
||
| 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; | ||
| } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This should include a terminating semi-colon. Otherwise it may result in other
wp_add_inline_scriptforwp-edit-widgetsbeing treated as a continuation of this code, e.g. an IIFE would result in "VM662:2 Uncaught TypeError: wp.editWidgets.initialize(...) is not a function".