The Code Editor lets you view and modify the HTML markup behind page content. Use it when the visual editor cannot make a needed local change, such as adding inline CSS, applying a CSS class, or creating a link target. The visual view shows visitor-facing content; code view exposes the tags and attributes that control formatting, links, and page positions. section 3.5.2 section 7.7
To edit markup in Gutenberg:
- Open the page editing screen and select the relevant block; use a Classic block for the demonstrated inline-CSS workflow. section 7.7
- Switch to code view with Ctrl-Shift-Alt-M, or use View > Source Code, Tools > Source Code, or the upper-right menu’s Code Editor option. section 7.7
- Edit the HTML, then choose Exit Code Editor to return to the visual editor. section 7.7
- Preview changes before relying on them; inline CSS added to a Paragraph block can trigger an inaccurate invalid-content warning and recovery can delete the block. section 7.7
Color one paragraph
A paragraph can receive a local style directly in its opening tag. This changes the text color without changing site-wide CSS: <p style="color: red;">This is a paragraph</p>. If a class is already defined in Additional CSS, apply it with the class attribute instead. section 7.7
<p style="color: red;">This is a paragraph</p>
Inspect a minimal paragraph tag with an inline color declaration. section 7.7
