Code Editor gets context aware and when opened reveals markup corresponding to currently selected block

[porg]

Current situation

Edit as HTML — 👍 Shows markup for the selected block directly on canvas

Block.Editor.1.Edit.as.HTML.mp4

Code Editor ⇧ ⌥ ⌘ M — 👎 Currently not context aware — Always opens on top

Block.Editor.2.Code.Editor.currently.not.context.aware.mp4

Proposal: 💡 Code Editor gets context aware!

• If there is/are a currently selected block(s)
• Triggering the Code editor via:
  • block context menu
  • global more menu
  • shortcut (⇧ ⌥ ⌘ M)
• Opens the Code Editor and highlights the relevant markup (all lines or start of block)

Block.Editor.3.Code.Editor.gets.context.aware.and.reveals.markup.corresponding.to.currently.selected.block.mp4

[carolinan]

I would love this feature, it would save me a lot of time when editing my content. The code editor view can sometimes be overwhelming to scroll through and it is not always easy to locate the block you want to edit.

[porg]

Until that feature gets implemented (if ever)

• If you often need to inspect WordPress markup you may find this helpful:
• The free plugin EditorsKit offers syntax highlighting of WordPress markup within Gutenberg's Code Editor environment:

[Mamaduka]

Thank you, @porg.

I think this might be a duplicate of #26738.

A general discussion regarding the syntax highlighting - #10423, #17017.

[porg]

• Closing my issue in favor of the elder:
  Highlight code for content selected when switching to Code Editor #26738
  which covers the essence + also has a good mockup video by @mapk which performs the context-aware opening of the code editor (jumps to markup and selects it which corresponds to the selection in the GUI)
• Added link/screenshot of EditorsKit as an existing 3rd party WP syntax highlighting plugin to:
  Syntax Highlighting for HTML block/ Code block and HTML editor #10423

[Mamaduka]

Thanks again for contributing, @porg!