Add Custom Styling?

[phpbits]

Hi,

There's no option for custom Inspector Controls to assign custom styling to a block via props. Are there any available option to the editor? Like add custom <style> to element onChange? Thanks!

I hope I've expressed my idea well. Tagging you @aduth :) Thanks a lot!

Cheers,
Jeffrey

[youknowriad]

Can't you use the custom className and provide the className in your theme/plugin assets instead?

[phpbits]

@youknowriad thought of that but how can I make the editor aware of the changes onChange? For example I'll be adding colors for heading. Are there any hooks available? Thanks!

[youknowriad]

The heading block should probably be updated to use the className prop provided in the edit. This prop is automatically updated when you update the custom className.

I think we should make this a "good practice" when creating blocks: Always use the className prop.

[phpbits]

@youknowriad yeah, but are there actions available when I've used the ColorPicker? For the changes to be reflected live on the editor. Thanks!

[youknowriad]

I'm not sure I understand. If you change colors, this should be saved as an attribute of the block and applied in the edit of your block.

[phpbits]

@youknowriad Yes, my thoughts exactly but not all blocks has color and background colors attributes. So how can I add those styles on blocks without the attributes? I'm thinking custom <style> + className but there's also no way to add this on the editor.

Let me know your thoughts. Thanks!

[youknowriad]

Oh I see what you mean, The solution might be to

1- Add support for these attributes in these blocks (this needs approval by design leads because I' don't think we want this for all blocks)
2- create separate blocks (I think this is the best option)
3- Enhance the existing blocks (registerBlockType hook) by adding attributes, a wrapper to edit and a wrapper to save but this is tricky and a bit fragile.

[phpbits]

@youknowriad I've already tried #3 but the changes on styling are not being reflected on the blocks on the editor. Are there any other options? Like assign custom inline styling using props? Thanks!

[youknowriad]

@phpbits no no other options, but I'm certain you can achieve #3 if you want, you need to add a div wrapper or something to edit to apply your changes.

[phpbits]

@youknowriad yeah but I'm thinking of any other options since this might cause an issue in the future updates. Are there any plans on creating hooks to add custom <style> on the editor? Thanks!

[youknowriad]

@phpbits Not that I'm aware of, because these would be block specific anyway.

[phpbits]

@youknowriad Thanks! I'll think of any other way/hack to achieve what I need ;) I'm trying to stay away with the third option as of the moment. Will probably just add the option w/o the live changes to be reflected on the editor for now.

[youknowriad]

I'm leaning towards closing this issue, thoughts @gziolo

[gziolo]

We have 4 ways available to modify blocks at the moment: https://wordpress.org/gutenberg/handbook/extensibility/#modifying-blocks-experimental. You can also try blocks.BlockEdit and wrap the original edit component with your own wrapper with additional styles. One of the examples how you can enrich the existing component with your own logic is presented in here: https://github.com/WordPress/gutenberg/blob/master/blocks/hooks/align.js#L74.

@phpbits feel free to ask more questions in this thread. I'm closing this one because there is no work planned in the near future to add additional filters to what we have already. We want to validate all the existing extensibility points first before we take any further actions. Thanks for understanding.

[phpbits]

@gziolo The problem is that assigning non-existing attributes results to Block Validation error : #4759 (comment) . There's no way to add custom attributes that have live preview.

I have this idea : #5360 (comment) and let me know if this is possible. Thanks!

[gziolo]

It is possible to do it at the moment, but this requires more changes for the existing block. You need to include such attribute inside attributes array, wrap edit to inject this attribute, and update save as discussed in #4759. I think #5360 is a good one to discuss possible improvements.