Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site Editor: Fix the Root Padding styles #61906

Merged
merged 1 commit into from
May 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ import { getGapCSSValue } from '../../hooks/gap';
import { store as blockEditorStore } from '../../store';
import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
import { getValueFromObjectPath, setImmutably } from '../../utils/object';
import BlockContext from '../block-context';
import { unlock } from '../../lock-unlock';
import { setThemeFileUris } from './theme-file-uri-utils';

Expand Down Expand Up @@ -310,15 +309,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.
* @param {boolean} disableRootPadding Whether to force disable the root padding styles.
* @return {Array} An array of style declarations.
*/
export function getStylesDeclarations(
blockStyles = {},
selector = '',
useRootPaddingAlign,
tree = {},
isTemplate = true
disableRootPadding = false
) {
const isRoot = ROOT_BLOCK_SELECTOR === selector;
const output = Object.entries( STYLE_PROPERTY ).reduce(
Expand Down Expand Up @@ -394,7 +393,7 @@ export function getStylesDeclarations(
// Don't output padding properties if padding variables are set or if we're not editing a full template.
if (
isRoot &&
( useRootPaddingAlign || ! isTemplate ) &&
( useRootPaddingAlign || disableRootPadding ) &&
rule.key.startsWith( 'padding' )
) {
return;
Expand Down Expand Up @@ -772,7 +771,7 @@ export const toStyles = (
hasBlockGapSupport,
hasFallbackGapSupport,
disableLayoutStyles = false,
isTemplate = true,
disableRootPadding = false,
styleOptions = undefined
) => {
// These allow opting out of certain sets of styles.
Expand Down Expand Up @@ -817,7 +816,11 @@ export const toStyles = (
ruleset += ':where(body) {margin: 0;';

// Root padding styles should only be output for full templates, not patterns or template parts.
if ( options.rootPadding && useRootPaddingAlign && isTemplate ) {
if (
options.rootPadding &&
useRootPaddingAlign &&
! disableRootPadding
) {
/*
* 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.
Expand Down Expand Up @@ -949,7 +952,7 @@ export const toStyles = (
selector,
useRootPaddingAlign,
tree,
isTemplate
disableRootPadding
);
if ( declarations?.length ) {
ruleset += `:where(${ selector }){${ declarations.join(
Expand Down Expand Up @@ -1208,10 +1211,15 @@ export function processCSSNesting( css, blockSelector ) {
* The use case for a custom config is to generate bespoke styles
* and settings for previews, or other out-of-editor experiences.
*
* @param {Object} mergedConfig Global styles configuration.
* @param {Object} mergedConfig Global styles configuration.
* @param {boolean} disableRootPadding Disable root padding styles.
*
* @return {Array} Array of stylesheets and settings.
*/
export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
export function useGlobalStylesOutputWithConfig(
mergedConfig = {},
disableRootPadding
) {
const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
mergedConfig = setThemeFileUris(
mergedConfig,
Expand All @@ -1224,10 +1232,6 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
return !! getSettings().disableLayoutStyles;
} );

const blockContext = useContext( BlockContext );
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the bug, who says that useGlobalStylesOutput need to be run within "BlockContext" and why?


const isTemplate = blockContext?.templateSlug !== undefined;

const { getBlockStyles } = useSelect( blocksStore );

return useMemo( () => {
Expand All @@ -1252,7 +1256,7 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
hasBlockGapSupport,
hasFallbackGapSupport,
disableLayoutStyles,
isTemplate
disableRootPadding
);
const svgs = toSvgFilters( updatedConfig, blockSelectors );

Expand Down Expand Up @@ -1299,17 +1303,19 @@ export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
hasFallbackGapSupport,
mergedConfig,
disableLayoutStyles,
isTemplate,
disableRootPadding,
getBlockStyles,
] );
}

/**
* Returns the global styles output based on the current state of global styles config loaded in the editor context.
*
* @param {boolean} disableRootPadding Disable root padding styles.
*
* @return {Array} Array of stylesheets and settings.
*/
export function useGlobalStylesOutput() {
export function useGlobalStylesOutput( disableRootPadding = false ) {
const { merged: mergedConfig } = useContext( GlobalStylesContext );
return useGlobalStylesOutputWithConfig( mergedConfig );
return useGlobalStylesOutputWithConfig( mergedConfig, disableRootPadding );
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,17 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
*/
import { store as editSiteStore } from '../../store';
import { unlock } from '../../lock-unlock';
import { TEMPLATE_POST_TYPE } from '../../utils/constants';

const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis );

function useGlobalStylesRenderer() {
const [ styles, settings ] = useGlobalStylesOutput();
const postType = useSelect( ( select ) => {
return select( editSiteStore ).getEditedPostType();
} );
const [ styles, settings ] = useGlobalStylesOutput(
postType !== TEMPLATE_POST_TYPE
);
const { getSettings } = useSelect( editSiteStore );
const { updateSettings } = useDispatch( editSiteStore );

Expand Down
Loading