Blank screen on creating new page or post when I install Gutenburg plugin

[naveenkharwar]

I just update my WordPress locally and activate Gutenburg plugin and found that it shows me white screen on adding new page or post but when I deactivate Gutenburg than all are working, actually all were working fine on basic editor.
I am giving screen shot of the page.

I am on WordPress 4.9.8

​https://ibb.co/jqHv0e

[naveenkharwar]

Image of Screen

[ocean90]

Hello @naveenkharwar, thank you for testing Gutenberg!

Until Gutenberg is merged into core, we're tracking issues related to Gutenberg on GitHub at ​https://github.com/WordPress/gutenberg.
I suggest to check your ​browser for any JavaScript errors and report the issue again on GitHub. Thanks again!

Related: #44716

This backports ​https://github.com/WordPress/gutenberg/pull/44731

I couldn't get it to work locally because the CSS file didn't seem to be there, but maybe I'm testing it wrong?

I couldn't get it to work locally because the CSS file didn't seem to be there, but maybe I'm testing it wrong?

I haven't tested it yet, but did you npm i before building to make sure you've got the latest package versions?

Yes, but I still didn't see the CSS file...

Hmm, I _am_ getting

  | <br />
-- | --
  | <b>Warning</b>:  file_get_contents(/wp-includes/css/dist/block-library/classic.css): failed to open stream: No such file or directory in <b>/var/www/src/wp-includes/script-loader.php</b> on line <b>3696</b><br />
  | <br />
  | <b>Warning</b>:  Cannot modify header information - headers already sent by (output started at /var/www/src/wp-includes/script-loader.php:3696) in <b>/var/www/src/wp-admin/admin-header.php</b> on line <b>9</b><br />

Ugh, unit tests are failing because they cannot locate that file:

file_get_contents(/var/www/src/wp-includes/css/dist/block-library/classic.css): failed to open stream: No such file or directory

I'll look into this tomorrow. Not sure if something is off with the way we're building things for unit tests, or if there's another reason 😕

We found another bug with the original solution, which I have a fix for here: ​https://github.com/WordPress/gutenberg/pull/45063

I'll also backport that in this PR

Ugh, unit tests are failing because they cannot locate that file:

file_get_contents(/var/www/src/wp-includes/css/dist/block-library/classic.css): failed to open stream: No such file or directory

I'll look into this tomorrow. Not sure if something is off with the way we're building things for unit tests, or if there's another reason 😕

Some quick thoughts on this:

• My current working hypothesis is that maybe we're not building @wordpress package JS and CSS before running PHP unit tests.
• We have other functions (e.g. wp_default_styles) that register styles that might (?) not exist at the time. How do they do it? (Or is it all classic stylesheets are readily available at the time that tests are run?)
• Are there any helpers we can use instead of file_get_contents that will avoid the "not found" error at test time (via some indirection?)
• Finally, do we need to mock that file, or file_get_contents when run for that file, or all of wp_add_editor_classic_theme_styles?

Would it be simpler to just use a static CSS file?

Would it be simpler to just use a static CSS file?

Probably 🤔 Maybe due to my ignorance -- there _might_ be established patterns to deal with built CSS in a scenario like this, I'm just unaware of it.

Would we lose anything significant if we made it static?

Would we lose anything significant if we made it static?

Nothing at all

Done in 20fed67, lets hope the tests pass!

Using TwentyTwenty Twelve, it seems that the font color of the buttons is different 😢
The CSS specificity seems to be the same on all fonts, so maybe that error is not 100% related with this backport.

Editor:

Frontend:

I added a commit to fix Twenty Twelve

Yes, Twenty Twenty also needs the RTL stylesheet, but block styles would belong in ​editor-style-block.css instead of classic.

Twenty Twelve does not have an RTL stylesheet for the editor.

Yes, Twenty Twenty also needs the RTL stylesheet, but block styles would belong in ​editor-style-block.css instead of classic.

The styles are already in editor-style-block.css, but the problem is that the editor block styles aren't provided through add_editor_style as they are usually. This means they don't get prefixed with editor-styles-wrapper, so they don't have the same specificity as the ones coming from this new CSS file. An alternative would be to manually add this prefix to the rules inside editor-style-block.css which I am happy to do if you think that approach is better.

The new inline styles come after editor-style-block.css with equal specificity. If you make the selectors slightly more specific for ​lines 927-928 and the font size adjustment at ​lines 1308-1309, that should be enough to correct the original state without changing the theme's Classic Editor stylesheet.

:root .editor-styles-wrapper .wp-block-button__link,
:root .editor-styles-wrapper .wp-block-file__button {

Twenty Twenty does not change text color on hover, but you could add the underline in editor-style-block.css, without :root. (Button block elements are not focusable in the editor.)

.editor-styles-wrapper .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-file__button:hover {
	text-decoration: underline;
}

@sabernhardt thanks that's super helpful. I have updated editor-style-blocks and revert the changes to the classic styles. I also updated the RTL stylesheet. Thanks again for all your help.

_[committer double signoff]_

Yeah thanks for the changes. Looks good to me now 👍

Commit message draft:

Editor: Correctly apply Button block styles for classic themes

In [54358], we reintroduced styles for Button blocks that had been removed from classic themes. However, they were added with a global scope, whereas editor styles are usually added with a `.editor-styles-wrapper` selector, which makes them more specific. In this change, we modify the way we add the classic theme styles so that they also get wrapped in an `.editor-styles-wrapper` selector to match specificity.

Furthermore, we’re adjusting specificity for some Button block related styling in the editor for the Twenty Twelve and Twenty Twenty themes.

Merges [https://github.com/WordPress/gutenberg/pull/44731 Gutenberg PR #44731] into trunk.

Follow-up to [54358].
Props scruffian, cbravobernal, sabernhardt, audrasjb.
See #56467.

Committed to Core trunk in r54687. Awaiting second approval to backport to the 6.1 branch.

Committed to Core trunk in r54687. Awaiting second approval to backport to the 6.1 branch.

Merged to the 6.1 branch in r54688.