Settings for Styles (text and background colors) and Typography (Bold, Italic, etc.) are found in the right panel and are common to many text blocks:

The Color panel contains options for text color and background color/gradient for the individual block, allowing for quick styling of section headings, callouts, infoboxes, etc.

The Typography panel provides toggles to activate various additional text controls for Sizing, Appearance (various font weights for bold text), Letter Spacing, Decorations (strikethrough, underline) and Letter Case (all caps, etc.).

The floating toolbar contains options for block transformations, arrows for vertical ordering, text decorations, adding links to text and an additional options dropdown.

The additional options include inline insertions, and other less-used decorations, such as strikethrough, formatted code and sub/superscript.

The Heading block shares all the same styling and typography settings as other text blocks, with the addition of setting a specific Heading level to delineate structure in your article.

The style and typography settings for the Paragraph block share the same options as discussed previously, but with the addition of limited alternative font selection, and a Drop Cap toggle.

The floating toolbar offers the same options for alignment, decorations and links, although with specific transformations, allowing you to convert a paragraph into a heading or list, etc.

Use the List block to organize text in numbered or bulleted lists.

Style are typography options are the same as paragraph blocks.

The floating toolbar offers options for numbered vs. bulleted lists.

Note that this block is a container for individual List Item blocks.

List items have a limited subset of styling options (only the text color can be changed), but the typography options are the same.

Additionally, the floating toolbar for a single List Item provides the same text options for text decoration and links, plus buttons for increasing or decreasing the list depth of an item.

For Ordered Lists, the settings panel provides format options (Numbers, Upper / Lowercase Letters, or Upper / Lowercase Roman Numerals.

You can also specify a starting value if the list is a continuation of a previous one.

The order can also be reversed for a countdown-style list.

Table creation has been limited to the tools in the Classic Paragraph block (similar to the classic article editor itself), however we now have a dedicated Table block with some customization and styling options, plus all the normal table editing tools one might expect: adding/deleting columns and rows, showing header and footer sections, creating striped row delineation and more.

There are two styles available for tables: Default and Stripes:

• The Default style has a plain background and borders around the cells.
• The Stripes style has alternating row background colors.
• The Color and Typography panels are identical to those in the Paragraph block settings.

The floating toolbar for the Table block provides similar text options as other text blocks, but has an additional menu for editing the table itself: Inserting or deleting columns or rows. This behavior is very similar to other table editing operations in many common document editors.

 Table Block Toolbar

The Quote block is similar to the List block in that it contains other blocks. The main difference is the citation toggle (indicated by the quill icon) for quote attribution. An inline image is attached to the citation text and the entire Quote block is right-aligned for a more engaging design.

The Pull Quote block offers additional styling options, such as a border with an adjustable radius. Notably the Pull Quote block doesn't contain other blocks, it has just the two text fields for the quote and citation (although the example below is also using the inline image option for the headshot).

The Details block is a block that allows you to include content hidden under a parent block with a text summary. This works like an accordion, with the text summary expanding to show nested content. This nested content, similar to other "container-style" blocks, can be anything you'd like. This block is often use for things such as FAQs, or directory-type listings.

Similar to adding a Horizontal Line in the Classic Editor, this block will add a simple line to delineate content in the flow of your article. There are options for line-style, thickness and color settings.

The Spacer block provides a resizable element that adds vertical space between other blocks. The size can be specified either in the settings panel or by dragging the circular handle at the bottom of the Spacer when it is selected.

You can add buttons to your website to create links to pages, products, or any other locations. Buttons help guide visitors to take action, such as signing up, purchasing, or learning more.

The Buttons block is similar to the List block in that it contains individual Button, each with separate styling options. Also the layout settings for a group of Buttons (the Buttons block) are very similar to the Row block, with vertical and horizontal justification, and the toggle to wrap the buttons onto additional rows depending on the width of the individual buttons.

The small + icon at the bottom left of the block highlight is used to add additional buttons to the Buttons block.

 After you add the block you will be presented with a single button ready for text and styling.

The width of the button can be set as a percentage of the container using the Settings switches in the side panel, e.g. 50% will stretch the button to half the size of the available width.

The style panel provides options for solid vs outline buttons, color settings, and a slider for adjusting the border radius, i.e. how round the corners of the button are. Note the border color will follow the color set for the text, while the background color will fill the button (regardless of the solid vs. outline setting. The Outline style only adds a border to the button with the text color.

The vertical and horizontal alignment of the buttons as well as the text alignment and decorations are all set in the floating toolbar.

You can even us the inline image option to add a graphic to your button:

The Classic block brings the legacy functionality of the Classic Editor into a single block in your content area. This allows for the use of established classic designs in your newer layouts integrating with other blocks as any other.

The block provides the same toolbar as the Classic editor, with the additional meta option to convert all content within the Classic block to individual content blocks, i.e. all paragraphs in the Classic block will become individual paragraph blocks after this process.

Upon opening a new post or page, you'll immediately notice the difference. Here's a breakdown of the key interface elements:

Main Content Area

The Main Content Area: This is where you'll see your content taking shape, block by block. It offers a more visual representation of how your final output will look.

Top Toolbar

The Top Toolbar: This persistent toolbar provides quick access to essential actions:

• The Plus (+) Icon (Block Inserter): Click this to open a panel where you can browse and add new blocks to your content. Think of this as your library of content elements. You can search for specific blocks or explore categories.
• Undo/Redo Arrows: Essential for correcting mistakes quickly.
• Content Structure Icon (List View): This icon (often looks like stacked lines) opens a sidebar that displays an outline of all the blocks on your page. This is incredibly helpful for navigating complex layouts and reordering sections.
• Block Settings Cog Icon: This toggles the Settings Sidebar on the right.
• View: Allows you to preview your post or page.
• Update/Publish Button: Saves or publishes your work.

Block Toolbar

The Block Toolbar: When you select a block, a contextual toolbar appears directly above it. This toolbar contains options specific to the selected block type. For example, a paragraph block will have options for alignment, bold, italics, adding links, and more. An image block will have options for alignment, adding alt text, and cropping.

Settings Sidebar - Block

The Settings Sidebar: This sidebar, toggled by the cog icon in the top toolbar, provides more advanced settings for the currently selected block and for the overall post or page. It's divided into two tabs:

• Block Tab: This tab displays settings specific to the block you have selected. This is where you'll find options for typography, color, dimensions, and advanced settings depending on the block type.
• Article/Page/Post Tab: This tab contains settings related to the entire post or page, such as status, visibility, permalink, categories, tags, featured image, and more – familiar territory for Classic Editor users.

Settings Sidebar - Article/Page/Post

Working with blocks is fundamental to the Block Editor experience:

• Adding Blocks: As mentioned, click the Plus (+) Icon in the top toolbar or the "+" icon that appears when you hover between existing blocks. Explore the categories or use the search bar to find the block you need.
• Moving Blocks: When you have block selected, you'll see arrows (up and down) on the left side of the Block Toolbar. Click these to move the block up or down. Alternatively, you can click and drag the block using the six-dot handle that appears next to the arrows. The List View (Content Structure icon) also allows for easy drag-and-drop reordering.
• Selecting Blocks: Simply click on a block in the content area to select it. The Block Toolbar will appear above it, and the Settings Sidebar will update to show the settings for that block.
• Deleting Blocks: Select the block you want to remove. In the Block Toolbar, click the three vertical dots (Options) and then select "Remove Block."

The List View, accessed by clicking the Content Structure Icon (stacked lines) in the top toolbar, opens a sidebar that provides a hierarchical outline of all the blocks in your content. This is more than just a table of contents; it's an interactive tool for managing your content's structure.

Here's how the List View helps in managing blocks:

Block List View

• Clear Visual Hierarchy: For complex layouts with nested blocks (like Columns, Groups, or Cover blocks), the List View clearly displays the parent-child relationships, making it easier to understand the structure of your content.
• Effortless Navigation: Instead of scrolling through a long page, you can quickly jump to any block by clicking on its name in the List View. This is especially useful for lengthy posts or pages.
• Drag-and-Drop Reordering: The List View provides a simple and intuitive way to reorder blocks. Just click and drag a block's name in the sidebar to its new position. This can be much easier than using the up/down arrows on the Block Toolbar, especially when moving blocks across larger distances or within nested structures. You can also drag blocks into other container-type blocks, such as moving multiple paragraph blocks into a Grid or Group block allowing you to treat the blocks together and even add styling to the container block itself.
• Selecting Blocks with Precision: Sometimes, selecting a specific nested block directly in the content area can be tricky. The List View allows you to select any block with a single click, ensuring you're working with the intended element.
• Quick Actions via the Three Dots: Hovering over a block's name in the List View reveals three vertical dots (Options). Clicking these dots provides quick access to actions like:
  • Duplicate: Create an exact copy of the selected block.
  • Insert Before/After: Add a new block above or below the selected one.
  • Remove Block: Delete the selected block.
  • Edit as HTML: Directly modify the HTML of the block.
  • Group: Enclose the block within a Group block for unified styling or layout control.
• Batch Selection (with Shift or Ctrl/Cmd): You can select multiple adjacent blocks by holding down the Shift key and clicking on the first and last blocks you want to select. For non-adjacent blocks, use Ctrl (Windows) or Cmd (Mac) while clicking. Once multiple blocks are selected in the List View, you can perform actions like moving or deleting them together.

The List View becomes an indispensable tool as your content grows in complexity, offering a structured and efficient way to manage your blocks beyond the immediate visual editor.