WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.49k stars 4.18k forks source link

`.is-layout-flex` css is empty when Editor Preferences: Use theme style is disabled #50011

Closed goodpenguins closed 1 year ago

goodpenguins commented 1 year ago

Description

I take back my previous words that everything is fine on the new empty site. Actually, no. .is-layout-flex css is empty when Editor Preferences: Use theme style is disabled. The same issue .is-layout-flex broken #45713 has been closed.

Theme: clear Twenty Twenty-Three Plugins: no plugins Block: Group Mode: Row

Step-by-step reproduction instructions

  1. Setup a new WP 6.2 site
  2. Remove default plugins
  3. Check the theme is default "Twenty Twenty-Three"
  4. Open "Hello World!" post
  5. Add a Group block in the Row mode
  6. Insert into the group about 2-6 paragraphs
  7. Everything is still good - the paragraphs are in a row.
  8. Now open Editor References and disable Use theme style ... and all is vertical.

Screenshots, screen recording, code snippet

image

image

//<style id='global-styles-inline-css'> body{--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--color--base: #F6F2EC;--wp--preset--color--contrast: #21251F;--wp--preset--color--primary: #5B4460;--wp--preset--color--secondary: #FCC263;--wp--preset--color--tertiary: #E7A1A9;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--duotone--dark-grayscale: url('#wp-duotone-dark-grayscale');--wp--preset--duotone--grayscale: url('#wp-duotone-grayscale');--wp--preset--duotone--purple-yellow: url('#wp-duotone-purple-yellow');--wp--preset--duotone--blue-red: url('#wp-duotone-blue-red');--wp--preset--duotone--midnight: url('#wp-duotone-midnight');--wp--preset--duotone--magenta-yellow: url('#wp-duotone-magenta-yellow');--wp--preset--duotone--purple-green: url('#wp-duotone-purple-green');--wp--preset--duotone--blue-orange: url('#wp-duotone-blue-orange');--wp--preset--font-size--small: clamp(1rem, 0.924rem + 0.24vw, 1.125rem);--wp--preset--font-size--medium: clamp(1.25rem, 1.021rem + 0.73vw, 1.625rem);--wp--preset--font-size--large: clamp(1.375rem, 1.07rem + 0.98vw, 1.875rem);--wp--preset--font-size--x-large: clamp(1.75rem, 1.369rem + 1.22vw, 2.375rem);--wp--preset--font-size--tiny: clamp(0.875rem, 0.799rem + 0.24vw, 1rem);--wp--preset--font-size--normal: clamp(1.125rem, 1.049rem + 0.24vw, 1.25rem);--wp--preset--font-size--xx-large: clamp(2.125rem, 1.706rem + 1.34vw, 2.813rem);--wp--preset--font-size--huge: clamp(2.5rem, 1.966rem + 1.71vw, 3.375rem);--wp--preset--font-size--gigantic: clamp(3.375rem, 2.384rem + 3.17vw, 5rem);--wp--preset--font-family--dm-sans: "DM Sans", sans-serif;--wp--preset--font-family--ibm-plex-mono: 'IBM Plex Mono', monospace;--wp--preset--font-family--inter: "Inter", sans-serif;--wp--preset--font-family--system-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;--wp--preset--font-family--source-serif-pro: "Source Serif Pro", serif;--wp--preset--spacing--30: clamp(0.625rem, 0.434rem + 0.61vw, 0.938rem);--wp--preset--spacing--40: clamp(1.25rem, 0.869rem + 1.22vw, 1.875rem);--wp--preset--spacing--50: clamp(1.875rem, 1.303rem + 1.83vw, 2.813rem);--wp--preset--spacing--60: clamp(2.5rem, 1.738rem + 2.44vw, 3.75rem);--wp--preset--spacing--70: clamp(2.813rem, 1.098rem + 5.49vw, 5.625rem);--wp--preset--spacing--80: clamp(3.75rem, 1.463rem + 7.32vw, 7.5rem);--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}

Environment info

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

ironprogrammer commented 1 year ago

Thank you for the report, @goodpenguins!

I can confirm this behavior in the editor when theme styles preferences are disabled. The frontend is unaffected by this setting.

Reproduction Report

Environment

Actual Results

Supplemental Artifacts

Editor Frontend
gb-50011-editor gb-50011-frontend
goodpenguins commented 1 year ago

Hey :) Thanks for the quick check.