Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widget Editor: Refactor header using the DocumentTools component from the editor package #57660

Closed
wants to merge 1 commit into from
Closed

Widget Editor: Refactor header using the DocumentTools component from the editor package #57660

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 5 additions & 11 deletions docs/reference-guides/data/data-core-edit-widgets.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,30 +208,24 @@ _Returns_

### setIsInserterOpened

> **Deprecated**

Returns an action object used to open/close the inserter.

_Parameters_

- _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false). To specify an insertion point, use an object.
- _value.rootClientId_ `string`: The root client ID to insert at.
- _value.insertionIndex_ `number`: The index to insert at.

_Returns_

- `Object`: Action object.
- _value_ `boolean|Object`: Whether the inserter should be opened (true) or closed (false).

### setIsListViewOpened

> **Deprecated**

Returns an action object used to open/close the list view.

_Parameters_

- _isOpen_ `boolean`: A boolean representing whether the list view should be opened or closed.

_Returns_

- `Object`: Action object.

### setIsWidgetAreaOpen

Sets the open state of the widget area.
Expand Down
2 changes: 2 additions & 0 deletions package-lock.json
View file
Open in desktop

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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@
"@wordpress/data": "file:../data",
"@wordpress/deprecated": "file:../deprecated",
"@wordpress/dom": "file:../dom",
"@wordpress/editor": "file:../editor",
"@wordpress/element": "file:../element",
"@wordpress/hooks": "file:../hooks",
"@wordpress/i18n": "file:../i18n",
Expand Down
125 changes: 0 additions & 125 deletions packages/edit-widgets/src/components/header/document-tools/index.js
View file
Open in desktop

This file was deleted.

34 changes: 24 additions & 10 deletions packages/edit-widgets/src/components/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,13 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { BlockToolbar } from '@wordpress/block-editor';
import { privateApis as editorPrivateApis } from '@wordpress/editor';
import { useSelect } from '@wordpress/data';
import { useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
Expand All @@ -13,27 +19,35 @@ import { store as preferencesStore } from '@wordpress/preferences';
/**
* Internal dependencies
*/
import DocumentTools from './document-tools';
import SaveButton from '../save-button';
import MoreMenu from '../more-menu';
import { unlock } from '../../lock-unlock';

const { DocumentTools } = unlock( editorPrivateApis );

function Header() {
const isLargeViewport = useViewportMatch( 'medium' );
const blockToolbarRef = useRef();
const { hasFixedToolbar } = useSelect(
( select ) => ( {
hasFixedToolbar: !! select( preferencesStore ).get(
const { hasFixedToolbar, showIconLabels } = useSelect( ( select ) => {
const { get: getPreference } = select( preferencesStore );

return {
hasFixedToolbar: !! getPreference(
'core/edit-widgets',
'fixedToolbar'
),
} ),
[]
);
showIconLabels: getPreference( 'core', 'showIconLabels' ),
};
}, [] );

return (
<>
<div className="edit-widgets-header">
<div className="edit-widgets-header__navigable-toolbar-wrapper">
<div
className={ classnames( 'edit-widgets-header', {
'show-icon-labels': showIconLabels,
} ) }
>
<div className="edit-widgets-header__toolbar">
{ isLargeViewport && (
<h1 className="edit-widgets-header__title">
{ __( 'Widgets' ) }
Expand Down Expand Up @@ -63,7 +77,7 @@ function Header() {
<div className="edit-widgets-header__actions">
<SaveButton />
<PinnedItems.Slot scope="core/edit-widgets" />
<MoreMenu />
<MoreMenu showIconLabels={ showIconLabels } />
</div>
</div>
</>
Expand Down
85 changes: 39 additions & 46 deletions packages/edit-widgets/src/components/header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,80 +40,73 @@
}
}

.edit-widgets-header__navigable-toolbar-wrapper {
.edit-widgets-header__toolbar {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 2;
overflow-x: hidden;
padding-left: $grid-unit-20;
// Leave enough room for the focus ring to show.
padding: 2px 0;

@include break-small () {
padding-left: $grid-unit-20;
}
}

.edit-widgets-header__title {
font-size: 20px;
padding: 0;
margin: 0 20px 0 0;
margin: 0;
}

.edit-widgets-header__actions {
display: flex;
align-items: center;
padding-right: $grid-unit-20;
gap: $grid-unit-05;
padding-right: $grid-unit-05;

@include break-small() {
gap: $grid-unit-10;
@include break-small () {
padding-right: $grid-unit-20 - ($grid-unit-15 * 0.5);
}

gap: $grid-unit-10;
}

.edit-widgets-header-toolbar {
border: none;
/**
* Show icon labels.
*/

// The Toolbar component adds different styles to buttons, so we reset them
// here to the original button styles
// Specificity bump needed to offset https://github.com/WordPress/gutenberg/blob/8ea29cb04412c80c9adf7c1db0e816d6a0ac1232/packages/components/src/toolbar/style.scss#L76
> .components-button.has-icon.has-icon.has-icon,
> .components-dropdown > .components-button.has-icon.has-icon {
height: $button-size;
min-width: $button-size;
padding: 6px;
.show-icon-labels.interface-pinned-items,
.show-icon-labels.edit-widgets-header {
.components-button.has-icon {
width: auto;

&.is-pressed {
background: $gray-900;
// Hide the button icons when labels are set to display...
svg {
display: none;
}

&:focus:not(:disabled) {
box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 0 0 $border-width $white;
outline: 1px solid transparent;
// ... and display labels.
&::after {
content: attr(aria-label);
}

&::before {
display: none;
&[aria-disabled="true"] {
background-color: transparent;
}
}
}

.edit-widgets-header-toolbar__inserter-toggle.edit-widgets-header-toolbar__inserter-toggle {
padding-left: $grid-unit;
padding-right: $grid-unit;

@include break-small {
padding-left: $grid-unit-15;
padding-right: $grid-unit-15;
}

&::after {
content: none;
.is-tertiary {
&:active {
box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
background-color: transparent;
}
}

svg {
transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 0.2s;
@include reduce-motion("transition");
}
.interface-pinned-items .components-button {
padding-left: $grid-unit;
padding-right: $grid-unit;

&.is-pressed {
svg {
transform: rotate(45deg);
@include break-small {
padding-left: $grid-unit-15;
padding-right: $grid-unit-15;
}
}
}
Loading
Loading