Prevent redundant css in the editor

WordPress · Jun 14, 2024 · b4dc34a · b4dc34a
1 parent 8a2859c
commit b4dc34a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/test/use-global-styles-output.js
@@ -565,9 +565,44 @@ describe( 'global styles renderer', () => {
  },
  };
 
- expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
- ':where(body) {margin: 0;}.is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }.is-layout-constrained > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }.is-layout-constrained > .aligncenter { margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) { max-width: var(--wp--style--global--content-size); margin-left: auto !important; margin-right: auto !important; }.is-layout-constrained > .alignwide { max-width: var(--wp--style--global--wide-size); }body .is-layout-flex { display:flex; }.is-layout-flex { flex-wrap: wrap; align-items: center; }.is-layout-flex > :is(*, div) { margin: 0; }body .is-layout-grid { display:grid; }.is-layout-grid > :is(*, div) { margin: 0; }' +
- ':root :where(.is-style-foo.wp-image.wp-image-spacing){padding-top: 2px;}:root :where(.is-style-foo.wp-image.wp-image-border-color){border-color: blue;}:root :where(.is-style-foo.wp-image){color: blue;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+ const hasBlockGapSupport = false;
+ const hasFallbackGapSupport = true;
+ const disableLayoutStyles = true;
+ const disableRootPadding = true;
+ const styleOptions = {
+ blockGap: false,
+ blockStyles: true,
+ layoutStyles: false,
+ marginReset: false,
+ presets: false,
+ rootPadding: false,
+ };
+
+ // Confirm no variation styles by default.
+ const withoutVariations = toStyles(
+ Object.freeze( tree ),
+ blockSelectors,
+ hasBlockGapSupport,
+ hasFallbackGapSupport,
+ disableLayoutStyles,
+ disableRootPadding,
+ styleOptions
+ );
+ expect( withoutVariations ).toEqual( '' );
+
+ // Includes variation styles when requested.
+ styleOptions.variationStyles = true;
+ const withVariations = toStyles(
+ Object.freeze( tree ),
+ blockSelectors,
+ hasBlockGapSupport,
+ hasFallbackGapSupport,
+ disableLayoutStyles,
+ disableRootPadding,
+ styleOptions
+ );
+ expect( withVariations ).toEqual(
+ ':root :where(.is-style-foo.wp-image.wp-image-spacing){padding-top: 2px;}:root :where(.is-style-foo.wp-image.wp-image-border-color){border-color: blue;}:root :where(.is-style-foo.wp-image){color: blue;}'
  );
  } );
 

diff --git a/packages/block-editor/src/components/global-styles/use-global-styles-output.js b/packages/block-editor/src/components/global-styles/use-global-styles-output.js
@@ -881,6 +881,7 @@ export const toStyles = (
  marginReset: true,
  presets: true,
  rootPadding: true,
+ variationStyles: false,
  ...styleOptions,
  };
  const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
@@ -1010,7 +1011,7 @@ export const toStyles = (
  );
  }
 
- if ( styleVariationSelectors ) {
+ if ( options.variationStyles && styleVariationSelectors ) {
  Object.entries( styleVariationSelectors ).forEach(
  ( [ styleVariationName, styleVariationSelector ] ) => {
  const styleVariations =

diff --git a/packages/block-editor/src/hooks/block-style-variation.js b/packages/block-editor/src/hooks/block-style-variation.js
@@ -116,22 +116,23 @@ function useBlockProps( { name, className, clientId } ) {
  const hasBlockGapSupport = false;
  const hasFallbackGapSupport = true;
  const disableLayoutStyles = true;
- const isTemplate = true;
+ const disableRootPadding = true;
 
  return toStyles(
  variationConfig,
  blockSelectors,
  hasBlockGapSupport,
  hasFallbackGapSupport,
  disableLayoutStyles,
- isTemplate,
+ disableRootPadding,
  {
  blockGap: false,
  blockStyles: true,
  layoutStyles: false,
  marginReset: false,
  presets: false,
  rootPadding: false,
+ variationStyles: true,
  }
  );
  }, [ variation, settings, styles, getBlockStyles, clientId ] );