Gutenberg: Make custom HTML blocks resizable

Created on 27 Jul 2018 · 5Comments · Source: WordPress/gutenberg

I don't always need to see every line of code in a custom HTML block, especially when I'm editing a completely different element. Sometimes I just want to minimize it or limit it to a certain height.

Please consider adding a stretch handle or minimize button.

[Block] HTML [Status] In Progress [Type] Enhancement

Source

Pikamander2

Most helpful comment

I'm happy to take a crack at this with the new ResizableBox component once #10396 lands.

chrisvanpatten on 9 Oct 2018

👍2

All 5 comments

We might also consider minimizing by default when the block is not focused.

mtias on 11 Sep 2018

I would 👍 the ides of resizing and also minimising by default.

karmatosed on 8 Oct 2018

I'm happy to take a crack at this with the new ResizableBox component once #10396 lands.

chrisvanpatten on 9 Oct 2018

👍2

Thanks @chrisvanpatten!

karmatosed on 9 Oct 2018

This issue is a little out of date as we removed CodeMirror from the HTML block in https://github.com/WordPress/gutenberg/pull/10396.

16187 adds a maximum height to the HTML block which fixes the poor UX of having every single line in the HTML block shown at all times.

I'll leave this as closed. We can look into further improvements to the HTML block when if we ever re-add syntax highlighting (see https://github.com/WordPress/gutenberg/issues/10423).