• I want to change the black background that the default theme in 2022 shows in the editor to a light grey color. That’s all. I’ve changed it on the live side, and want to see the same in the backend when I’m editing. I’ve known how to do it in the past, but that process doesn’t seem to be working with this. For example, 2020 had an assets/css path to a editor-style-block-custom.css. I don’t see anything comparable for 2022. How do I control this?

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hi!
    When you say black background, do I understand correctly that you mean the background color of the header, on the home page?

    You can change this color for both the front and the editor by using the block settings (no custom CSS or code is needed).

    Step 1: Open the Site Editor ( Appearance > Editor)
    Make sure that you are viewing the correct page (home).
    Step 2: Open the list view from the top toolbar.
    From the list view, select the group block that is inside the block that is labeled
    “header dark small”.
    Step 3. With the group block selected, open the block settings sidebar. Open the color panel.
    -Changing the colors here will update both the front and the editor.
    -Remember to save the changes.

    Thread Starter keress

    (@keress)

    No, I’m sorry, that’s not what I mean. I have managed to style the ‘live’ side just as I wanted. That was very easy. I’m talking about how it all looks in the admin editing area. I’ve always preferred getting the styling in the admin editor to look more like the ‘live’ side, but the means to do this is not apparent.
    What I’m trying to say is that I have changed the live side to have a light grey background and need to see the same thing when I’m editing the page. I always try to give that much to my clients so they aren’t lost when they try to tweak their own content.
    In 2020, for example, in your child theme you create a file ‘wp-content/themes/[theme-name]/assets/css/editor-style-block-custom.css,’ then add a call in your ‘function.php’ file and you’re able to transfer relevant tags you created in the style.css, to that file and your editing experience is much more a WYSIWYG.
    What files control all this in 2022?

    Block themes works differently than classic themes.
    (I apologize if the following is too basic or simplified)

    Colors in block themes are settings for blocks, since everything is a block.
    The same settings are applied on the front and in the editors: That is how block themes achieve WYSIWYG.
    Twenty Twenty-Two does not load a separate CSS file for the editors, it relies on these settings.

    To change any color, for both the editors and the front, use either the Site Editor or the configuration file called theme.json.

    To change the body background color, from within WordPress, go to Appearance > Editor, open the Styles settings by clicking on the button at the top right, the one with the half black, half white circle, and then select Colors > Background.

    To learn about theme.json please go to
    https://developer.www.ads-software.com/block-editor/how-to-guides/themes/theme-json/

    https://developer.www.ads-software.com/themes/advanced-topics/theme-json/

    —–

    If you really really want to, you can add a CSS file for the editors in a
    child theme, but it would mean that the settings for the website color would not match the actual color used, and you wouldn’t be able to take advantage of the block theme features.

    Thread Starter keress

    (@keress)

    I meant to thank you. This was a very helpful post. Bit by bit I’m figuring this out.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How Do I edit the editor-style.css in 2022’ is closed to new replies.