So far this has been my only contribution to the Gutenberg project. Though there’s been several other things I’ve had my eye on improving as I continue to get better at understanding, using, and building WordPress blocks.
Below is a short list of random things I’d like to improve (or see improved). I haven’t checked if any of these have been brought up or are currently being worked on (yet), but I’ll keep this post updated with my progress and findings.
Drum roll, Here’s my list…
Retain HTML block preview state on save.
This one bothers me a bit and is also a pretty easy fix. In the HTML block, you can paste raw HTML code and then preview it as the rendered HTML. However, on save and refresh, you see the raw HTML render in the editor again rather than retaining the preview you had set when you saved.
Retaining the preview on save offers a better display. Also, people that are not too tech savvy will likely freak if when see (unavoidable) raw HTML in the editor, which could have a negative impact on their feelings toward the editor and the experience.
12/31/22 Update: PR has been created!
Ability to preview a shortcode block.
Much like HTML block, the shortcode block should also have a preview mode (that maintains state like I mentioned as a shortcoming of the HTML block).
Shortcodes may have fallen out of fashion, but they are still a part of WordPress, and will be for a long time. They are super simple to create that it’s not a surprise that many developers still use them over blocks in some cases.
I understand that the Gutenberg team only wants the most basic support for shortcodes while encouraging developers to write blocks, but it seems like a disservice to not provide better tools to folks that continue to write, and those that must support, shortcodes for their sites in a Gutenberg what-you-see-is-what-you-get world.
I did start writing a plugin that replaces the shortcode block with a Better Shortcode Block, but it has been a several months since I’ve worked on it. This plugin not only has a preview mode that maintains state, but also improves the whole shortcode editorial experience and makes it much more block like.
Easily change the color of a link.
This one is sort of annoying and a little more complicated than the first 2 fixes I’ve brought up (mostly around user experience). There’s really no good way of changing the color of a link and its states (like hover). Best you can do (or so I’ve found) is use highlight, but that still creates a weird hover where the color of the underline is different than the color of the text. It’s also a bit of a weird workflow, and still quite limiting. And none of this is actually the correct way to do things, it’s just a workaround…
I’ve run into some legit instances where this was needed. I’m currently getting around it with some utility CSS classes that I apply to the paragraph block (or just editing the block HTML). But for most users this is not a solution. For the UX, I think adding a tab to the overlay to manage colors and decoration for link states would solve this issue and add the right amount of flexibility.
Break points for the Spacer block.
This one I plan to submit to Genesis Blocks first, though I think a lot of the features they added for responsiveness belong in core. StudioPress has done a great job adding responsive tools to core blocks. Just take a look here.
To expand on this, the Spacer block should also have responsive sizing capabilities. In many cases, the size you make a spacer on desktop is too much for mobile, so being able to control the size of your space between devices is pretty essential.
That’s my list. Again, I’ll add updates as I progress through some of these improvements. If you have any thoughts on these or other improvements you’d like to see, please leave a comment.
Leave a Reply