Skip to content

Commit

Permalink
Add: Block areas tabbed sidebar to the widgets screen
Browse files Browse the repository at this point in the history
  • Loading branch information
jorgefilipecosta committed May 27, 2020
1 parent 2881f84 commit c0fb028
Show file tree
Hide file tree
Showing 6 changed files with 310 additions and 7 deletions.
5 changes: 3 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions packages/edit-widgets/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
"@wordpress/keycodes": "file:../keycodes",
"@wordpress/media-utils": "file:../media-utils",
"@wordpress/notices": "file:../notices",
"classnames": "^2.2.5",
"lodash": "^4.17.15",
"rememo": "^3.0.0"
},
Expand Down
71 changes: 71 additions & 0 deletions packages/edit-widgets/src/components/sidebar/block-areas.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/**
* WordPress dependencies
*/
import { useDispatch, useSelect } from '@wordpress/data';
import { widget } from '@wordpress/icons';
import { BlockIcon } from '@wordpress/block-editor';
import { Button } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

function BlockArea( { clientId } ) {
const { name } = useSelect(
( select ) => {
return select( 'core/block-editor' ).getBlockAttributes( clientId );
},
[ clientId ]
);
const { selectBlock } = useDispatch( 'core/block-editor' );
return (
<li>
<Button
onClick={ () => {
selectBlock( clientId );
} }
>
{ name }
<span className="edit-widgets-block-areas__edit">
{ __( 'Edit' ) }
</span>
</Button>
</li>
);
}

export default function BlockAreas() {
const blockOrder = useSelect( ( select ) => {
return select( 'core/block-editor' ).getBlockOrder();
} );
const hasBlockAreas = blockOrder.length > 0;
return (
<>
<div className="edit-widgets-block-areas">
<div className="edit-widgets-block-areas__top-container">
<BlockIcon icon={ widget } />
<div>
<p>
{ __(
'Block areas (also known as “Widget Areas”) are global locations in your site’s layout that can accept blocks. These vary by theme, but are typically places like your sidebar or footer.'
) }
</p>
<span>
{ hasBlockAreas
? __(
'Your theme contains the following block areas:'
)
: __(
'Your theme does not contain block areas.'
) }
</span>
</div>
</div>
{ hasBlockAreas && (
<ul>
{ blockOrder.map( ( clientId ) => (
<BlockArea key={ clientId } clientId={ clientId } />
) ) }
</ul>
) }
</div>
</>
);
}
125 changes: 120 additions & 5 deletions packages/edit-widgets/src/components/sidebar/index.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,137 @@
/**
* External dependencies
*/
import { map } from 'lodash';
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { useEffect } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { ComplementaryArea } from '@wordpress/interface';
import { BlockInspector } from '@wordpress/block-editor';
import { cog } from '@wordpress/icons';
import { Button } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';

/**
* Internal dependencies
*/
import BlockAreas from './block-areas';

const CORE_WIDGET_COMPLEMENTARY_AREAS = {
'edit-widgets/block-areas': __( 'Block areas' ),
'edit-widgets/block-inspector': __( 'Block' ),
};

function ComplementaryAreaHeader( { activeComplementaryArea } ) {
const { enableComplementaryArea } = useDispatch( 'core/interface' );
return (
<ul>
{ map( CORE_WIDGET_COMPLEMENTARY_AREAS, ( label, identifier ) => {
const isActive = identifier === activeComplementaryArea;
return (
<li key={ identifier }>
<Button
onClick={ () =>
enableComplementaryArea(
'core/edit-widgets',
identifier
)
}
className={ classnames(
'edit-widgets-sidebar__panel-tab',
{
'is-active': isActive,
}
) }
aria-label={
isActive
? // translators: %s: sidebar label e.g: "Block areas".
sprintf( __( '%s (selected)' ), label )
: label
}
data-label={ label }
>
{ label }
</Button>
</li>
);
} ) }
</ul>
);
}

export default function Sidebar() {
const { enableComplementaryArea } = useDispatch( 'core/interface' );
const { currentArea, hasBlockSelected, isGeneralSidebarOpen } = useSelect(
( select ) => {
let activeArea = select(
'core/interface'
).getActiveComplementaryArea( 'core/edit-widgets' );
const isSidebarOpen = !! activeArea;
const selectionStart = select(
'core/block-editor'
).getBlockSelectionStart();
if ( ! CORE_WIDGET_COMPLEMENTARY_AREAS[ activeArea ] ) {
if ( ! selectionStart ) {
activeArea = 'edit-widgets/block-areas';
} else {
activeArea = 'edit-widgets/block-inspector';
}
}
return {
currentArea: activeArea,
hasBlockSelected: !! selectionStart,
isGeneralSidebarOpen: isSidebarOpen,
};
},
[]
);

// currentArea, and isGeneralSidebarOpen are intentionally left out from the dependencies,
// because we want to run the effect when a block is selected/unselected and not when the sidebar state changes.
useEffect( () => {
if (
hasBlockSelected &&
currentArea === 'edit-widgets/block-areas' &&
isGeneralSidebarOpen
) {
enableComplementaryArea(
'core/edit-widgets',
'edit-widgets/block-inspector'
);
}
if (
! hasBlockSelected &&
currentArea === 'edit-widgets/block-inspector' &&
isGeneralSidebarOpen
) {
enableComplementaryArea(
'core/edit-widgets',
'edit-widgets/block-areas'
);
}
}, [ hasBlockSelected, enableComplementaryArea ] );

return (
<ComplementaryArea
className="edit-widgets-sidebar"
smallScreenTitle={ __( 'Widget Areas' ) }
header={
<ComplementaryAreaHeader
activeComplementaryArea={ currentArea }
/>
}
headerClassName="edit-widgets-sidebar__panel-tabs"
scope="core/edit-widgets"
complementaryAreaIdentifier="edit-widgets/block-inspector"
title={ __( 'Block' ) }
identifier={ currentArea }
icon={ cog }
>
<BlockInspector showNoBlockSelectedMessage={ false } />
{ currentArea === 'edit-widgets/block-areas' && <BlockAreas /> }
{ currentArea === 'edit-widgets/block-inspector' && (
<BlockInspector />
) }
</ComplementaryArea>
);
}
114 changes: 114 additions & 0 deletions packages/edit-widgets/src/components/sidebar/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
.components-panel__header.edit-widgets-sidebar__panel-tabs {
justify-content: flex-start;
padding-left: 0;
padding-right: $grid-unit-05;
border-top: 0;
margin-top: 0;

ul {
display: flex;
}
li {
margin: 0;
}
.components-button.has-icon {
display: none;
margin-left: auto;

@include break-medium() {
display: flex;
}
}
}

.components-button.edit-widgets-sidebar__panel-tab {
border-radius: 0;
height: 50px - $border-width;
background: transparent;
border: none;
box-shadow: none;
cursor: pointer;
display: inline-block;
padding: 3px 15px; // Use padding to offset the is-active border, this benefits Windows High Contrast mode
margin-left: 0;
font-weight: 400;
color: $dark-gray-900;

// This pseudo-element "duplicates" the tab label and sets the text to bold.
// This ensures that the tab doesn't change width when selected.
// See: https://github.com/WordPress/gutenberg/pull/9793
&::after {
content: attr(data-label);
display: block;
font-weight: 600;
height: 0;
overflow: hidden;
speak: none;
visibility: hidden;
}

&.is-active {
// The transparent shadow ensures no jumpiness when focus animates on an active tab.
box-shadow: inset 0 0 0 $border-width-focus transparent, inset 0 0 -$border-width-tab 0 0 $theme-color;
font-weight: 600;
position: relative;

// This border appears in Windows High Contrast mode instead of the box-shadow.
&::before {
content: "";
position: absolute;
top: 0;
bottom: 1px;
right: 0;
left: 0;
border-bottom: $border-width-tab solid transparent;
}
}

&:focus {
box-shadow: inset 0 0 0 $border-width-focus $theme-color;
}

&.is-active:focus {
box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 -$border-width-tab 0 0 $theme-color;
}
}

.edit-widgets-block-areas__top-container {
display: flex;
padding: $grid-unit-20;
.block-editor-block-icon {
margin-right: $grid-unit-20;
}
}

.edit-widgets-block-areas {
ul {
list-style: none;
margin-bottom: -$border-width;
}

li {
margin: 0;
border-bottom: $border-width solid $light-gray-500;
&:first-child {
border-top: $border-width solid $light-gray-500;
}

button {
display: block;
width: 100%;
font-weight: 600;
padding: $grid-unit-20;
height: auto;
text-align: left;
}
}
}

.edit-widgets-block-areas__edit {
float: right;
/* Mimics the default link style in common.css */
color: #0073aa;
font-weight: 400;
}
1 change: 1 addition & 0 deletions packages/edit-widgets/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

@import "./components/customizer-edit-widgets-initializer/style.scss";
@import "./components/header/style.scss";
@import "./components/sidebar/style.scss";
@import "./components/notices/style.scss";

// In order to use mix-blend-mode, this element needs to have an explicitly set background-color
Expand Down

0 comments on commit c0fb028

Please sign in to comment.