search

codex-team / editor.js

A block-style editor with clean JSON output
https://editorjs.io
Apache License 2.0
27.54k stars 2.02k forks source link

Adanced block tunes in sidebar #2727

Open mauritskorse opened 1 month ago

mauritskorse commented 1 month ago

I am looking to add some block tunes to a sidebar (similar to what WordPress provides in their block editor). This would make editing blocks much quicker and with less clicks. Especially if it would be possible to open the block tunes in the sidebar once a block is selected (or the cursor is within that block).

It would also be great if that current block can keep its selected class for good user interaction: Currently I open a modal in which I render a form with the more advanced block tune settings. However once I open that modal from the block tunes menu, the block on which I opened the modal, is visualluy being deselected, so the feedback to the user becomes less clear which block they are actually editing.

neSpecc commented 1 month ago

Screenshots would be helpfull here

mauritskorse commented 3 weeks ago

In this vid I show how Wordpress does it. I don't have a proper example with EditorJs just yet as I am still working on the form. But as you can see in this example the settings for e.g. coloring, spacing, visibility, etc, can become quite complex. At least much more complex than some simple toggles in the popover menu. Also, you can see that the moment another block is selected the settings for that block are immediately shown in the sidebar which makes it quite fast to adjust styling.

https://github.com/codex-team/editor.js/assets/3665483/e25d64c0-3602-4b84-b09d-a63205f62962

In general it would be nice if there would be a event listener that can be configured on the editors config in that triggers when a block is focussed/selected and passes along at least the block, tunes, possibly the available tools, and the core api of the editor. With that in place, this should be possible.