Block editor styling missing

sage_fish · January 24, 2023, 8:02pm

With Sage 10 theme installed I seem to have lost all the default core styling for the admin block editor.

Is there a way that I can easily restore those default styles?

strarsis · January 24, 2023, 9:30pm

Yes, see this example:

sage_fish · January 25, 2023, 9:38am

$relAppCssPath = asset('app.css')->relativePath(get_theme_file_path());
add_editor_style($relAppCssPath);

I’ve added that bit of code to setup.php and the block editor in admin remains as it was before I did. The styling is missing. For example, each block added to the editor runs from the left edge to the right edge of the block editor area. I am using Docker for my local environment, not sure if that makes a difference.

If I switch themes from Sage 10 to Twenty Twenty Three (or any other theme) the correct styling returns.

I was hoping to use Sage 10 for upcoming projects but I find myself spending so much time trying to get the simpler stuff to work (unsuccessfully) that it concerns me about the more complex stuff that I could face further down the development process.

strarsis · January 25, 2023, 12:20pm

Check out this Sage 10 Full Site Editing sample theme:

github.com

strarsis/sage10-fse/blob/2b96d1a6cb4e6a0498aea0bfa5f2323e75114f99/app/setup.php#L65


      
              'nav-walker',
              'nice-search',
              'relative-urls',
          ]);
          
          
/**
           * Disable full-site editing support.
           *
           * @link https://wptavern.com/gutenberg-10-5-embeds-pdfs-adds-verse-block-color-options-and-introduces-new-patterns
           */
          //remove_theme_support('block-templates');
          
          
/**
           * Register the navigation menus.
           *
           * @link https://developer.wordpress.org/reference/functions/register_nav_menus/
           */
          register_nav_menus([
              'primary_navigation' => __('Primary Navigation', 'sage'),
          ]);

Do these adjustments help?

ben · January 25, 2023, 1:45pm

This is expected behavior until you configure and style the editor

sage_fish · January 25, 2023, 2:01pm

I’ve installed your theme but I get the same results as mine.

sage_fish · January 25, 2023, 2:04pm

Why does Sage remove the styling? I want to restore the default core styling for the editor. I have been unable to do so with the suggestions thus far.

ben · January 25, 2023, 2:12pm

Sage doesn’t remove the styling. You can’t compare Sage to a core theme that is fully configured and styled for the block editor. You must configure and style the block editor for your site. Sage is a starter theme.

I highly suggest reading about theme.json and even looking into the core themes to see how they use it.

sage_fish · January 25, 2023, 2:40pm

OK thanks. That makes sense now