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

Add Custom Styling? #5251

Closed
phpbits opened this issue Feb 26, 2018 · 16 comments
Closed

Add Custom Styling? #5251

phpbits opened this issue Feb 26, 2018 · 16 comments
Labels
[Feature] Extensibility The ability to extend blocks or the editing experience

Comments

@phpbits
Copy link
Contributor

phpbits commented Feb 26, 2018

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
Copy link
Contributor

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

@phpbits
Copy link
Contributor Author

phpbits commented Feb 26, 2018

@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
Copy link
Contributor

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
Copy link
Contributor Author

phpbits commented Feb 26, 2018

@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
Copy link
Contributor

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
Copy link
Contributor Author

phpbits commented Feb 26, 2018

@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
Copy link
Contributor

youknowriad commented Feb 26, 2018

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
Copy link
Contributor Author

phpbits commented Feb 26, 2018

@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
Copy link
Contributor

@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
Copy link
Contributor Author

phpbits commented Feb 26, 2018

@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
Copy link
Contributor

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

@phpbits
Copy link
Contributor Author

phpbits commented Feb 26, 2018

@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 youknowriad added the [Feature] Extensibility The ability to extend blocks or the editing experience label Feb 26, 2018
@youknowriad
Copy link
Contributor

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

@gziolo
Copy link
Member

gziolo commented Feb 27, 2018

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
Copy link
Contributor Author

phpbits commented Mar 3, 2018

@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
Copy link
Member

gziolo commented Mar 5, 2018

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Extensibility The ability to extend blocks or the editing experience
Projects
None yet
Development

No branches or pull requests

3 participants