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

Add a GlobalStylesScreenRootSlot slot in Global Styles root screen #49136

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

Add a GlobalStylesScreenRootSlot slot in Global Styles root screen #49136

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
869c8c9
Add GlobalStylesScreenRootSlot
BogdanUngureanu Mar 15, 2023
b85e507
Merge branch 'trunk' into add/global-styles-screen-root-slot
BogdanUngureanu Mar 17, 2023
35bc156
Add key prop to Fragment to avoid React warnings.
BogdanUngureanu Mar 17, 2023
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
21 changes: 21 additions & 0 deletions packages/edit-site/src/components/global-styles/screen-root.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,13 @@ import {
Card,
CardDivider,
CardMedia,
createSlotFill,
} from '@wordpress/components';
import { isRTL, __ } from '@wordpress/i18n';
import { chevronLeft, chevronRight } from '@wordpress/icons';
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { Fragment } from '@wordpress/element';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';

/**
Expand All @@ -27,6 +29,23 @@ import ContextMenu from './context-menu';
import StylesPreview from './preview';
import { unlock } from '../../private-apis';

const { Slot: GlobalStylesScreenRootSlot } = createSlotFill(
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we be exposing the API in edit-site/src/index like we do for all the slots?

'GlobalStylesScreenRoot'
);

const ScreenRootSlot = () => (
<GlobalStylesScreenRootSlot>
{ ( fills ) =>
fills.map( ( fill, index ) => (
<Fragment key={ index }>
<CardBody>{ fill }</CardBody>
<CardDivider />
</Fragment>
) )
}
</GlobalStylesScreenRootSlot>
);

function ScreenRoot() {
const { useGlobalStyle } = unlock( blockEditorPrivateApis );
const [ customCSS ] = useGlobalStyle( 'css' );
Expand All @@ -52,6 +71,8 @@ function ScreenRoot() {

return (
<Card size="small" className="edit-site-global-styles-screen-root">
<ScreenRootSlot />
Copy link
Contributor

Choose a reason for hiding this comment

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

This is a too prominent place to add a slot and plugins will compete too much for place. I think the preview and variations should stay at the top. Let's move this slot after the "browse styles" button

Copy link
Contributor

Choose a reason for hiding this comment

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

I'd echo Riad on this one. After browse styles seems like a good position.


<CardBody>
<VStack spacing={ 4 }>
<Card>
Expand Down