Wordpress editors are set to build web pages even with no knowledge of HTML principles. The latest editor, Gutenberg, is designed in a way similar to a rather familiar for most users MS Word’s interface. It has various tools for editing texts, adding images with their further adjustments, inserting links, etc. Basically, the working process is intuitive and understandable even if the user has no experience of working with any HTML editor at all. The magic of HTML tags and CSS styles is behind the scene. Any step you proceed in creating a web page is automatically supported by an appropriate HTML code. However, if you have some skills and knowledge in direct coding, it is also possible to use an HTML code viewer that displays the code of the web page you create. It allows you to grasp full control over the HTML code and webpage appearance.

Other, often less appreciated advantage during the composition of longer creative text content is the removal of distraction caused by the visual design. When you’re in the writing (i.e., typing) phase, you want the words to flow onto the screen with minimal distractions and interruptions. Gutenberg with its interactive design excels at distracting you from writing. Thus, even if you are using a sophisticated editor you actually you write less, focusing instead on columns, buttons, fonts, spaces, etc. If you paste text, it likely gets added to the document with a different font family, size and even color. After burning-time fighting with its interface, you rightfully conclude that Gutenberg is sometimes trying to sabotage your writing process.

Code editor

Fortunately, you can switch to a plain code mode selecting from the menu “Code editor” or using ctrl-shift-alt-M shortcut what helps you avoid distraction by the visual design. Additionally, you will have a full control of your writing and formatting. However, compared to pure HTML editors, in the case of Gutenberg the matter is more complicated. Additionally to HTML tags, the editor adds its own markup presented as HTML comments, e.g.

<!-- wp:paragraph {"key": "value"} -->
<p>Welcome to the world of blocks.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"right"} -->
<p style="text-align:right">This is a right aligned paragraph block. 
<!-- /wp:paragraph -->

The output is

This is a right aligned paragraph block.

Now, lets try with section headings and subheadings

<!-- wp:heading {"level":1} -->
<h1>This is a heading (H1)</h1>
<!-- /wp:heading -->
<!-- wp:subhead -->
<p class="wp-block-subhead">This is a subheading</p>
<!-- /wp:subhead -->

The result is

This is a heading (H1)

This is a subheading

Next, lets take a list

<!-- wp:list -->
<ul>
    <li>List item 1
    <li>List item 2
    <li>List item 3
</ul>
<!-- /wp:list -->

• List item 1
• List item 2
• List item 3

Finally, let’s use columns

<!-- wp:columns --><div class="wp-block-columns">
<!-- wp:column --><div class="wp-block-column">
<!-- wp:paragraph -->
<p>Left column</p>
<!-- /wp:paragraph -->
</div><!-- /wp:column -->
<!-- wp:column --><div class="wp-block-column">
<!-- wp:paragraph -->
<p>Right column</p>
<!-- /wp:paragraph -->
</div><!-- /wp:column -->
</div><!-- /wp:columns -->

As a result we get

Taking into account the above examples, many parts of a website can be prepared offline in your favorite editor and then transferred to Gutenberg editor. By transfer I mean here a simple copy-paste method as currently, I have no knowledge about any tool which can make this process synchronised automatically. Thus, the described approach may be used rather for webpages with lots of text content which doesn’t require many formatting tags.