close
Skip to content

Add a GlobalStylesScreenRootSlot slot in Global Styles root screen#49136

Closed
BogdanUngureanu wants to merge 3 commits intoWordPress:trunkfrom
BogdanUngureanu:add/global-styles-screen-root-slot
Closed

Add a GlobalStylesScreenRootSlot slot in Global Styles root screen#49136
BogdanUngureanu wants to merge 3 commits intoWordPress:trunkfrom
BogdanUngureanu:add/global-styles-screen-root-slot

Conversation

@BogdanUngureanu
Copy link
Contributor

@BogdanUngureanu BogdanUngureanu commented Mar 16, 2023

What?

Resolves: #48068

Add a GlobalStylesScreenRootSlot slot in the Global Styles root screen.

Why?

In order to allow integrators a way to add custom elements in the Global Styles Screen Root, a new slot is added at the top of the section.

How?

It creates a new slot that's called at the top of the GlobalStylesScreenRoot component.

Testing Instructions

It doesn't change the current behavior.
Open the Global Styles in site editor and make sure nothing changes.

Testing Instructions for Keyboard

@Mamaduka Mamaduka requested review from a team, gziolo and nerrad and removed request for a team March 16, 2023 13:20
@Mamaduka Mamaduka requested review from a team and removed request for gziolo and nerrad March 16, 2023 13:20
@Mamaduka Mamaduka added [Feature] Extensibility The ability to extend blocks or the editing experience [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing") labels Mar 16, 2023
@oandregal

This comment was marked as outdated.

Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

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

Thanks for your work here, that's a great start.

Like mentioned here #48068 (comment) I think we should start by protecting this API with the Gutenberg plugin check, can we introduce this check.

Also, there's a couple things that we should consider:

  • Adding an e2e test for this extensibility API potentially.
  • Documentation: Not entirely sure how we're documenting the editSite slots in the block editor handbook but we should be consistent. It doesn't have to be in this PR since this is still experimental but let's make sure to have a todo item in the issue at least.


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.

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?

Copy link
Contributor

@ntsekouras ntsekouras left a comment

Choose a reason for hiding this comment

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

Thank you for the PR @BogdanUngureanu, this looks good in general!

Besides Riad's notes, I'd suggest to move the slot in its own file.

@bph
Copy link
Contributor

bph commented Dec 13, 2023

Hi @BogdanUngureanu This seems like a promising start to get this into the Gutenberg plugin for testing. Would you be available to adjust your PR to incorporate the comments you received from @ntsekouras and @youknowriad

@Mamaduka
Copy link
Member

Mamaduka commented Jul 2, 2025

Hi, @BogdanUngureanu!

Is there a plan to continue working on this?

@github-actions
Copy link

github-actions bot commented Jul 2, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: BogdanUngureanu <bogdanungureanu@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: ntsekouras <ntsekouras@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
Co-authored-by: bph <bph@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: Copons <copons@git.wordpress.org>
Co-authored-by: erikyo <codekraft@git.wordpress.org>
Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org>
Co-authored-by: mmtr <mmtr86@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@BogdanUngureanu
Copy link
Contributor Author

No, I’ve found a workaround for it. I’ll close it

@github-project-automation github-project-automation bot moved this from PR needs review to Done in Increase Gutenberg Extensibility Jul 2, 2025
@Mamaduka
Copy link
Member

Mamaduka commented Jul 2, 2025

Thanks for the update, @BogdanUngureanu!

Do you mind sharing your workaround in the issue? It could be helpful for other extenders.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Feature] Extensibility The ability to extend blocks or the editing experience [Feature] Site Editor Related to the overarching Site Editor (formerly "full site editing")

Projects

Development

Successfully merging this pull request may close these issues.

Provide ways to extend/customize the Global Styles sidebar

6 participants