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

Cannot get blockGap when skipping supports.spacing serialisation. #63163

Open
inc2734 opened this issue Jul 5, 2024 · 0 comments
Open

Cannot get blockGap when skipping supports.spacing serialisation. #63163

inc2734 opened this issue Jul 5, 2024 · 0 comments
Labels
[Feature] Block API API that allows to express the block paradigm. [Type] Bug An existing feature does not function as intended

Comments

@inc2734
Copy link
Contributor

inc2734 commented Jul 5, 2024

Description

If the serialisation of supports.spacing is skipped, getSpacingClassesAndStyles() can be used to obtain the spacing styles.

In this case, padding and margins are correctly retrieved, but blockGap is not.

Step-by-step reproduction instructions

  1. In block.json, set supports.spacing.__experimentalSkipSerialisation to true.
  2. In Edit import { __experimentalGetSpacingClassesAndStyles as useSpacingProps } from '@wordpress/block-editor';.
  3. In Edit const spacingProps = useSpacingProps( attributes );

Screenshots, screen recording, code snippet

block.json

"supports": {
	"spacing": {
		"__experimentalSkipSerialization": true,
		"padding": true,
		"blockGap": true
	}
}

Edit

import {
	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
} from '@wordpress/block-editor';

export default function ( { attributes } ) {
	const spacingProps = useSpacingProps( attributes );
	console.log( spacingProps );
}

Input attributes

{
	"style":{
		"spacing":{
			"blockGap":"var:preset|spacing|40",
			"padding":{
				"top":"var:preset|spacing|20",
				"bottom":"var:preset|spacing|20",
				"left":"var:preset|spacing|20",
				"right":"var:preset|spacing|20"
			}
		}
	}
}

Ideal

style: {
	paddingTop: 'var(--wp--preset--spacing--20)',
	paddingRight: 'var(--wp--preset--spacing--20)',
	paddingBottom: 'var(--wp--preset--spacing--20)',
	paddingLeft: 'var(--wp--preset--spacing--20)',
	gap: 'var(--wp--preset--spacing--40)',
}

Actual

style: {
	paddingTop: 'var(--wp--preset--spacing--20)',
	paddingRight: 'var(--wp--preset--spacing--20)',
	paddingBottom: 'var(--wp--preset--spacing--20)',
	paddingLeft: 'var(--wp--preset--spacing--20)',
}

Following the code, only padding and margin were imported below.

https://github.com/WordPress/gutenberg/blob/trunk/packages/style-engine/src/styles/spacing/index.ts

Environment info

  • WordPress 6.1 RC1
  • Gutenberg Plugin 18.7.1 active / deactive

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

@inc2734 inc2734 added the [Type] Bug An existing feature does not function as intended label Jul 5, 2024
@t-hamano t-hamano added the [Feature] Block API API that allows to express the block paradigm. label Jul 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block API API that allows to express the block paradigm. [Type] Bug An existing feature does not function as intended
2 participants