Add a gutenberg property to the document settings that allows a custom background-color to be set per post/ page

[BinaryMoon]

• Add Gutenberg custom property
• Update the editor styles so the background colour and content colours match the colour selected
• set the body class as light or dark (overriding the default body classes) based upon the brightness of the selected background colour.
• Override the site background colour with the selected post background colour.

[BinaryMoon]

There may be some tips for this here:
https://twitter.com/mor10/status/1150827104151281664

[paaljoachim]

Btw I pasted Mortens question into the core-editor slack channel. As it gets attention from the Core developers.

Replies in the core editor channel:

@mor10 I do this in my theme, but not through any standard interface. I have an eventListener for the creation of editor-writing-flow so I can add the classes the user has chosen in Customizer.
But it would be better to have it as a filter on the settings, as it was in the old editor, in addition to a Class setting in the sidebar for dynamic usage (or better yet as part of the API that exists in the old editor for a Formats button that can apply to whatever selector is coded, like my theme does for the old editor).

Onur Oztaskiran [2:54 AM]
@mor10 If that example is similar to what you’re looking for, I’m using register_meta with rest in theme and then access and manipulate with a sidebar plugin registration. I think this could also work for your case. https://developer.wordpress.org/block-editor/tutorials/plugin-sidebar-0/

https://cl.ly/f87585257c73 (edited)
cl.ly

mor10 [3:08 AM]
Thanks both of you. I've played around with similar solutions but I'm not getting where I want to go without doing things that feel wrong and hacky.

[BinaryMoon]

Thanks Paal - that's great! :)

[paaljoachim]

I posted on the Chaplin support forum.
https://wordpress.org/support/topic/black-background-hides-the-black-gutenberg-layout-controls/#post-11743329

(My comment)
Hey

Switching to black background in the customizer then switching to a page/post that uses Gutenberg the layout/content area shows the black background. The Gutenberg layout controls become hidden as they are also black.

There is a Github issue for this here:
WordPress/gutenberg#16641

---

Anders reply:
@paaljoachim Yeah, that’s a tricky one. Hopefully we get better tools for handling the UI styling in the future – even an option to invert the color of elements displayed directly on top of the background would go a long way.

In the meantime, my best recommendation is to either avoid background colors that directly overlap with the controls, or to temporarily switch background color from those colors when editing posts/pages.

[BinaryMoon]

Not the best reply, but it's fair I think. Either that or I could remove the background colour from the preview, but that's not so wysiwyg.