passing props.style while extending core blocks, work on heading block but not on other blocks

derridHeidegger commented 2 years ago

Description

Hi i am extending core blocks using the filter hooks functions. so i am using the "blocks.registerBlockType" to add additional attributes. i am using the "editor.BlockEdit" to have my inspactor controls and update the attributes values. and i use the "blocks.getSaveContent.extraProps" to save the added attributes on the front end.

and indeed all attributes pass to the front side. but, the issue is that while editing none of the changes are reflected in the full site editor. the attributes are changing but it does not displayed inside the full site editor.

for example: this is a function that change the margin top attribute:

const updateMTDvalue = (newDTval) => { setAttributes({ marginTop: (newDTval === undefined ? '' : newDTval) }); }

and as i said the new values does pass to the save function and works on the front end. but in the full site editor....nothing.

so i thought maybe i should add styles in the edit function like so:

`if (attributes.desktopTop && attributes.desktopTop != undefined && attributes.desktopTop != '') {

props.style = {
    ...props.style,
    'display': 'grid',
    '--this-is-custom-variable': '#444',
    marginTop: attributes.desktopTop + attributes.desktopUnit
};

}`

as you can see i also try to hard code display and even a css custom property, as well as the attribute values.

the issue is that all the styles are being implemented on the heading block inside the full site editor, but none of the styles were passed for the paragraph, group and other blocks.

what is the issue there? isn't there a uniformity to the blocks? notice i am talking about the full site editor. with the editor in the pages and posts i can DOM manipulate using the client-id, but in the full site editor i get null when using the client-id.

Step-by-step reproduction instructions

extend core block
use the three hooks
add props.style
check it in the full site editor

Screenshots, screen recording, code snippet

No response

Environment info

wordpress version : latest gutenberg version: latest no other plugins are enabled

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

ndiego commented 2 years ago

This issue was reviewed in today's Editor Bug Scrub. Would you be able to provide a complete code example that can be used to replicate the issue? Thanks!

colorful-tones commented 2 years ago

It may be helpful to focus on a specific block in reporting this issue and then test and verify against other blocks as we go. 🤔

t-hamano commented 2 years ago

I think this issue contains multiple questions, but here is what I found out about props.style.

Some blocks, including the heading block, accept props.style and pass it to useBlockProps.

This is probably why some blocks are not reflected when props.style is passed via the hook.

However, as seen in the implementation of the quote block, I think props.style should not be inherently allowed on the web platform.

https://github.com/WordPress/gutenberg/blob/533e0b7dad99a4b52c1d79a2e8d2bf36a2e6f819/packages/block-library/src/quote/edit.js#L87-L92

kathrynwp commented 2 years ago

@derridHeidegger Checking in once more to see whether you'd be able to provide a complete code example that can be used to replicate the issue. Thanks!

Mamaduka commented 2 years ago

This issue was reviewed again in today's Editor Bug Scrub. Based on recent feedback from @t-hamano, I think it makes sense to have consistency across the blocks for the style prop.

WordPress / gutenberg