Don't output root padding when editing patterns. (#54373)

packages/block-editor/src/components/global-styles/use-global-styles-output.js

@@ -32,6 +32,7 @@ import {
 	kebabCase,
 	setImmutably,
 } from '../../utils/object';
+import BlockContext from '../block-context';
 
 // List of block support features that can have their related styles
 // generated under their own feature level selector rather than the block's.
@@ -307,13 +308,15 @@ const getFeatureDeclarations = ( selectors, styles ) => {
  *
  * @param {Object}  tree                A theme.json tree containing layout definitions.
  *
+ * @param {boolean} isTemplate          Whether the entity being edited is a full template or a pattern.
  * @return {Array} An array of style declarations.
  */
 export function getStylesDeclarations(
 	blockStyles = {},
 	selector = '',
 	useRootPaddingAlign,
-	tree = {}
+	tree = {},
+	isTemplate = true
 ) {
 	const isRoot = ROOT_BLOCK_SELECTOR === selector;
 	const output = Object.entries( STYLE_PROPERTY ).reduce(
@@ -386,10 +389,10 @@ export function getStylesDeclarations(
 	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
-		// Don't output padding properties if padding variables are set.
+		// Don't output padding properties if padding variables are set or if we're not editing a full template.
 		if (
 			isRoot &&
-			useRootPaddingAlign &&
+			( useRootPaddingAlign || ! isTemplate ) &&
 			rule.key.startsWith( 'padding' )
 		) {
 			return;
@@ -757,7 +760,8 @@ export const toStyles = (
 	blockSelectors,
 	hasBlockGapSupport,
 	hasFallbackGapSupport,
-	disableLayoutStyles = false
+	disableLayoutStyles = false,
+	isTemplate = true
 ) => {
 	const nodesWithStyles = getNodesWithStyles( tree, blockSelectors );
 	const nodesWithSettings = getNodesWithSettings( tree, blockSelectors );
@@ -782,7 +786,8 @@ export const toStyles = (
 		ruleset += ` --wp--style--global--wide-size: ${ wideSize };`;
 	}
 
-	if ( useRootPaddingAlign ) {
+	// Root padding styles should only be output for full templates, not patterns or template parts.
+	if ( useRootPaddingAlign && isTemplate ) {
 		/*
 		 * These rules reproduce the ones from https://github.com/WordPress/gutenberg/blob/79103f124925d1f457f627e154f52a56228ed5ad/lib/class-wp-theme-json-gutenberg.php#L2508
 		 * almost exactly, but for the selectors that target block wrappers in the front end. This code only runs in the editor, so it doesn't need those selectors.
@@ -909,7 +914,8 @@ export const toStyles = (
 				styles,
 				selector,
 				useRootPaddingAlign,
-				tree
+				tree,
+				isTemplate
 			);
 			if ( declarations?.length ) {
 				ruleset += `${ selector }{${ declarations.join( ';' ) };}`;
@@ -1152,6 +1158,10 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 		return !! getSettings().disableLayoutStyles;
 	} );
 
+	const blockContext = useContext( BlockContext );
+
+	const isTemplate = blockContext?.templateSlug !== undefined;
+
 	const getBlockStyles = useSelect( ( select ) => {
 		return select( blocksStore ).getBlockStyles;
 	}, [] );
@@ -1176,7 +1186,8 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 			blockSelectors,
 			hasBlockGapSupport,
 			hasFallbackGapSupport,
-			disableLayoutStyles
+			disableLayoutStyles,
+			isTemplate
 		);
 		const svgs = toSvgFilters( mergedConfig, blockSelectors );