Note: The following instructions are for the Visual Text Editor compiled from WORDPRESS FOR DUMMIES SIXTH EDITION and WordPress.org documentation. Does not apply to Gutenberg (and similar Block Editors) including Plugin Editors

1. Click the Add New link on the Posts Dashboard menu. The Add New Post page opens.
2. Type the title of your post in the Enter Title Here text field at the top of the Add New Post page.
3.  Type the content of your post in the text box.

Go to the Publish module (top RHS of the page) and click Save Draft.

Page refreshes with all contents saved but unpublished.

 Visual Editing tab above the text is normally the default.

Formatting is only after the text is typed in. To format highlight the text and click the appropriate buttons that appear above the text box. Following are more details for formatting and other tasks.

Bold:   

Italic:

Strikethrough: – Strikethrough Text        

Unordered List:            

Ordered List:

Blockquote:  Indents paragraph/section of text selected

Align Left: Inserts the lines up the selected text against the left margin

 Align Centre: Centres text on the page

Align Right: Move selected text to right margin

Insert/Edit Link: Create a hyperlink of the text selected

Unlink: Removes the hyperlink from the selected text

Insert More Tag: Inserts the tag, which lets you split the display on your blog page. It publishes the text written above this tag with a Read More link, which takes the user to a page with the full post. This feature is good for really long posts.

 Preformatted: Inserts the HTML tags around the text to indicate preformatted text and preserves both spaces and line breaks.

Headings 1, 2, 3, 4, 5, 6: Inserts header HTML tags such as around text to indicate HTML headings (H1 defines the largest, H6 defines the smallest; heading formats are usually defined in the CSS

.

Underline: Inserts the HTML tags around the text to display it as underlined

 Align Full: Lines up the selected text evenly between left and right margins.

Text Colour: Displays the text in the colour chosen.

Paste as Plain Text: Removes all formatting from the text – unformatted text.

Paste from Word: Copying text from a Microsoft Word document

Remove Formatting: Removes all formatting inside the post.

 • Insert Custom Character: Pop-up window offering different characters such as $, %, &, and ©.

• Outdent: Moves text to the left one preset level with each click. This only works when the text has already been indented.

• Indent: Moves text to the right one preset level with each click.

 • Undo: Click to undo your last formatting action. • Redo: Click to redo your last formatting action.

 • Help: Pops open a window with helpful information about using the text editor, including time-saving keyboard shortcuts.

 WordPress Block Editor (Gutenberg Tutorial)

WordPress 5.0 released in 2019, had “Gutenberg, a Block Editor.  It did editing differently although, the old classical editor was still available, which is essentially a text editor with formatting buttons .The Block editor, on the other hand, uses ‘Blocks’, content elements,  added to the edit screen to create different types of content layouts. A single block being added to a post/page. The blocks inserted may be for typing in texts (paragraphs), images, videos, galleries, audio, lists, etc. There are blocks for all common content elements, eg. “table block” selects columns and rows and create a table.

Clicking Posts » Add New or Pages » Add New menu launches the block editor.

Adding a Block in Gutenberg

The first block of every post or page is the title. The mouse or tab key is used to move the cursor down for inserting data.

By default, the next block is a paragraph block. This allows users to start writing right away. But to add a different block type, add new block button (+) has to be clicked below the existing block, or on the right hand side of the block. Clicking the button displays add block menu with a search bar on top and commonly used blocks below. Click on tabs to browse block categories or typing in a keyword to search for a block. Instead of a mouse click on the button, a keyboard shortcut / can be used to search and add a block.

Working with Blocks.

Each block comes with its own toolbar which appears on top of the block. The buttons in the toolbar change depending on the block being edited. Apart from the toolbar, each block can also have its own block settings which would appear in the right column of the edit screen. Blocks can be moved up and down by dragging them or by clicking the up and down buttons next to each block.

Organizing Blocks in Groups and Columns

Block editor has tools that manage and organize content layouts.  Multiple blocks are selected by clicking on them while pressing the keyboard SHIFT key. Clicking block type button in the toolbar transforms the selected blocks into Groups or Columns. Styles, then, can be applied to the entire group block like changing, alignment and spacing. Block editor also allows adding of empty Group or Columns block that can be populated with other blocks.

Saving and Reusing Blocks in Gutenberg

Blocks can be saved and reused. This can be by clicking on the menu button on the RHS of block toolbar and selecting ‘Add to reusable blocks’ option. Also a block “name” identifies that block.  By Clicking on the add block button on a page saves it in the ‘Reusable’ tab.  By mousing over it a quick preview of the block and clicking inserts it into the post or page. All reusable blocks are stored in the WordPress database. There is a block manager page. In which the reusable blocks can edited/deleted or exported.Note: You can use entire groups and columns as reusable blocks too. This allows you to save entire sections and use them whenever needed.

Publishing and Managing Options in Gutenberg Block Editor

Each WordPress post contains a lot of metadata. This includes information like publish date, categories and tags, featured images, and more. All these options are neatly placed in the right column on the editor screen.

Adding Some Common Blocks in New Editor

1. Adding an image in the WordPress block editor

There is a ready-to-use image block in the WordPress block editor. Simply add the block and then upload an image file or select from the media library. Images can also dragged and dropped images in the computer. The editor automatically creates an image block for it. Once an image is added the block settings is used to add image metadata such as, alt text, size, and link to the image.

2. Adding a link in the block editor

The block editor comes with several blocks where text can be added. The most commonly used one is the paragraph block which comes with an insert link button in the toolbar. All other commonly used text blocks also include a link button in the toolbar. Link insert can be done through the keyboard shortcut, Command + K for Mac and CTRL + K on Windows computers.

3. Adding an image gallery in Gutenberg

The gallery block works like the image block when added or uploaded or selecting image files.

4. Adding shortcodes in WordPress posts using Gutenberg

 Shortcodes also work in Block editor. They can be added to a paragraph block, or you can use the shortcode block.