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

Editor Interface: Remove small header from global styles/plugin sidebar #64474

Merged
merged 2 commits into from
Oct 22, 2024
+39 −91
Merged

Editor Interface: Remove small header from global styles/plugin sidebar #64474

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d010b1a
Editor Interface: Remove small header from global styles/plugin sidebar
t-hamano Oct 22, 2024
5493337
Merge branch 'trunk' into interface/remove-small-header
t-hamano Oct 22, 2024
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
1 change: 0 additions & 1 deletion packages/edit-site/src/components/global-styles-sidebar/default-sidebar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,6 @@ export default function DefaultSidebar( {
scope="core"
identifier={ identifier }
title={ title }
smallScreenTitle={ title }
icon={ icon }
closeLabel={ closeLabel }
header={ header }
Expand Down
32 changes: 18 additions & 14 deletions packages/edit-site/src/components/global-styles-sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';
import { useViewportMatch } from '@wordpress/compose';
import { privateApis as routerPrivateApis } from '@wordpress/router';

/**
Expand Down Expand Up @@ -81,6 +82,7 @@ export default function GlobalStylesSidebar() {
const { setEditorCanvasContainerView } = unlock(
useDispatch( editSiteStore )
);
const isMobileViewport = useViewportMatch( 'medium', '<' );

useEffect( () => {
if ( shouldClearCanvasContainerView ) {
Expand Down Expand Up @@ -149,20 +151,22 @@ export default function GlobalStylesSidebar() {
gap={ 1 }
className="edit-site-global-styles-sidebar__header-actions"
>
<FlexItem>
<Button
icon={ seen }
label={ __( 'Style Book' ) }
isPressed={
isStyleBookOpened ||
isRevisionsStyleBookOpened
}
accessibleWhenDisabled
disabled={ shouldClearCanvasContainerView }
onClick={ toggleStyleBook }
size="compact"
/>
</FlexItem>
{ ! isMobileViewport && (
<FlexItem>
<Button
icon={ seen }
label={ __( 'Style Book' ) }
isPressed={
isStyleBookOpened ||
isRevisionsStyleBookOpened
}
accessibleWhenDisabled
disabled={ shouldClearCanvasContainerView }
onClick={ toggleStyleBook }
size="compact"
/>
</FlexItem>
) }
<FlexItem>
<Button
label={ __( 'Revisions' ) }
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/components/global-styles/screen-css.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ function ScreenCSS() {
description={
<>
{ description }
<br />
<ExternalLink
href={ __(
'https://developer.wordpress.org/advanced-administration/wordpress/css/'
Expand Down
13 changes: 0 additions & 13 deletions packages/editor/src/components/plugin-sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { ComplementaryArea } from '@wordpress/interface';

/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';

/**
* Renders a sidebar when activated. The contents within the `PluginSidebar` will appear as content within the sidebar.
* It also automatically renders a corresponding `PluginSidebarMenuItem` component when `isPinnable` flag is set to `true`.
Expand Down Expand Up @@ -76,16 +69,10 @@ import { store as editorStore } from '../../store';
* ```
*/
export default function PluginSidebar( { className, ...props } ) {
const { postTitle } = useSelect( ( select ) => {
return {
postTitle: select( editorStore ).getEditedPostAttribute( 'title' ),
};
}, [] );
return (
<ComplementaryArea
panelClassName={ className }
className="editor-sidebar"
smallScreenTitle={ postTitle || __( '(no title)' ) }
scope="core"
{ ...props }
/>
Expand Down
4 changes: 4 additions & 0 deletions packages/interface/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Breaking Changes

- Removed `smallScreenTitle` prop from the `ComplementaryArea` component ([#64474](https://github.com/WordPress/gutenberg/pull/64474)).

## 7.0.0 (2024-10-16)

### Breaking Changes
Expand Down
33 changes: 11 additions & 22 deletions packages/interface/src/components/complementary-area-header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { closeSmall } from '@wordpress/icons';
import ComplementaryAreaToggle from '../complementary-area-toggle';

const ComplementaryAreaHeader = ( {
smallScreenTitle,
children,
className,
toggleButtonProps,
Expand All @@ -23,27 +22,17 @@ const ComplementaryAreaHeader = ( {
<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />
);
return (
<>
<div className="components-panel__header interface-complementary-area-header__small">
{ smallScreenTitle && (
<h2 className="interface-complementary-area-header__small-title">
{ smallScreenTitle }
</h2>
) }
{ toggleButton }
</div>
<div
className={ clsx(
'components-panel__header',
'interface-complementary-area-header',
className
) }
tabIndex={ -1 }
>
{ children }
{ toggleButton }
</div>
</>
<div
className={ clsx(
'components-panel__header',
'interface-complementary-area-header',
className
) }
tabIndex={ -1 }
>
{ children }
{ toggleButton }
</div>
);
};

Expand Down
25 changes: 0 additions & 25 deletions packages/interface/src/components/complementary-area-header/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,3 @@
.components-panel__header.interface-complementary-area-header__small {
background: $white;
padding-right: $grid-unit-05;

.interface-complementary-area-header__small-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
margin: 0;
}

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

.interface-complementary-area-header {
background: $white;
padding-right: $grid-unit-15; // Reduced padding to account for close buttons.
Expand All @@ -23,12 +6,4 @@
.interface-complementary-area-header__title {
margin: 0;
}

.components-button.has-icon {
display: none;

@include break-medium() {
display: flex;
}
}
}
8 changes: 0 additions & 8 deletions packages/interface/src/components/complementary-area/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,14 +84,6 @@ The scope of the complementary area e.g: "core", "myplugin/custom-screen-a",
- Type: `String`
- Required: Yes

### smallScreenTitle

In small screens, the complementary area may take up the entire screen.
`smallScreenTitle` allows displaying a title above the complementary area, so the user is more aware of what the area refers to.

- Type: `String`
- Required: No
Comment on lines -87 to -93
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm wondering if we should simply remove this prop, or show a deprecation message.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like simply removing it but wouldn’t say I know best.


### title

Human friendly title of the complementary area.
Expand Down
7 changes: 4 additions & 3 deletions packages/interface/src/components/complementary-area/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,6 @@ function ComplementaryArea( {
panelClassName,
scope,
name,
smallScreenTitle,
title,
toggleShortcut,
isActiveByDefault,
Expand Down Expand Up @@ -220,6 +219,9 @@ function ComplementaryArea( {
},
[ identifier, scope ]
);

const isMobileViewport = useViewportMatch( 'medium', '<' );

useAdjustComplementaryListener(
scope,
identifier,
Expand Down Expand Up @@ -300,7 +302,6 @@ function ComplementaryArea( {
className={ headerClassName }
closeLabel={ closeLabel }
onClose={ () => disableComplementaryArea( scope ) }
smallScreenTitle={ smallScreenTitle }
toggleButtonProps={ {
label: closeLabel,
size: 'small',
Expand All @@ -314,7 +315,7 @@ function ComplementaryArea( {
<h2 className="interface-complementary-area-header__title">
{ title }
</h2>
{ isPinnable && (
{ isPinnable && ! isMobileViewport && (
<Button
className="interface-complementary-area__pin-unpin-item"
icon={ isPinned ? starFilled : starEmpty }
Expand Down
6 changes: 1 addition & 5 deletions packages/interface/src/components/complementary-area/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,7 @@
z-index: z-index(".interface-complementary-area .components-panel__header");

&.editor-sidebar__panel-tabs {
top: $panel-header-height;

@include break-medium() {
top: 0;
}
top: 0;
}
}

Expand Down
Loading