weblines staging

Gutenberg

Accordion Block
The Accordion Block is a very useful block for FAQs, and other “click for more information” scenarios. Previously, we might have had to add a plugin or use a more sophisticated page builder to achieve this, but WordPress v6.9 introduces this block into the native WordPress editor.

Here is a simple example.

Here is the answer.

Multiple paragraphs can be included inside the Accordion Panel

Here is the answer to the second question.

And we can even include images or other blocks. Layout can be as complex as you need.

I find it a little tricky to add multiple questions. You need to use “finding your way around the block editor” tricks, such as breadcrumbs or document list view, in order to position the cursor in the right place to add a new accordion item.

Block Structure

The layout of the Accordion block within the WordPress editor is shown here. The block contains several Accordion Items, each of which includes a Heading and an Accordion Panel. The Accordion Panel can include any types of blocks.

Take care to ensure that you are adding content where you want it to be.
- To add further content within an accordion panel, make sure the accordion panel is selected, before clicking the “+” icon.
- To add a new accordion item, make sure the overall accordion block is selected.
- To add content after the accordion, make sure to click outside of the accordion block first.
Use the breadcrumbs at the bottom of the editor page, or use the document list view, in order to select the right block. See “finding your way around the block editor” for further help.

Adding and Styling the Accordion Block

Click to add a new block. Then just search foraccordion.

Or find the Accordion block icon in the Design group of blocks.

The accordion block is inserted into the editor and the first Accordion Heading and Accordion Panel content can be added easily.

Multiple paragraphs, even images or other blocks, can be included in the accordion panel section of content.

After the first accordion item has been added, be sure to position the cursor in the right place to add another accordion item.

Check the breadcrumbs at the bottom of the editor page, or use the Document Overview (click on the icon in the top left corner) and ensure the current block is the overall Accordion block (and not one of the blocks inside it). Then click on the + to add a new accordion item.

Simple style settings are available in the sidebar, such as text or background colour, font size or borders. These can be set for the accordion panel, accordion item or accordion block as a whole.

Site developers can use theme.json or theme styling to set default styling or alternative style options for the block.

Here is a great post on the WordPress Developer Blog about styling the accordion block.

Block Settings

Another method for adding simple “click to open” sections is the Details block.

However, the Accordion block is designed particularly for FAQs and other sections with multiple openable items. This block is particularly useful when you want behaviour such as “close one question when another is opened”.

This Auto-close option is available in the block’s sidebar (at the overall Accordion block level). Note that the default setting is Off; set this to On to automatically close accordion items when a new one is opened.

Other options include showing an open/close icon for each accordion item and the positioning of this icon.

More Information

For alternative methods of adding clickable sections, see the Details Block.

For help in finding your way around the block editor, see Finding Your Way Around the Block Editor. See also Page Layout with the Block Editor.
12 January 2026
Details Block

The Details block is handy for standalone “click to read more information” sections on a web page.

Here is a simple example.

Click to read more

This is the additional text, which is hidden until the heading is clicked.

Previously, we might have had to add a plugin or use a more sophisticated page builder to achieve this “accordion” type action, but the details block allows us to add this kind of content very simply.

Adding and Styling the Details Block

How do I add a Details block?

Click to add a new block. Then just search for details.

Or find the Details block icon in the Text group of blocks.

Multiple paragraphs, even images or other blocks, can be included in the “hidden” section of content. Take care to ensure that you are adding content where you want it to be – either within the details block, or a separate section thereafter. Check the breadcrumbs at the bottom of the editor page, or use the Document Overview (click on the icon in the top left corner).

How can I change the appearance of the Details block?

Site developers can use theme.json or or theme styling to set the default styling for the block.

Styling is a little tricky – any styles are applied to the whole block. So if you want the questions to be larger than usual font, for example, you must style the whole block to have larger font, then apply another style to the hidden answer to revert to normal font size. So, not ideal yet. But hopefully future versions will improve and at least we now have this as a native block to work with.

Be sure to use the post breadcrumbs or other methods to check whether you are editing a paragraph within the Details block or outside of it.

More Information

The Details block is particularly useful for standalone “click to read more” scenarios. For FAQs, or other sections with multiple open/close questions, see also the Accordion Block.

For detail about images and the block editor, see Block Editor – Image Block and Block Editor – Cover Images.

For our introduction to the block editor, see Beginning with the Block Editor and also Page Layout with the Block Editor.

5 November 2024
Block Editor – Image Block

Image Block

The block editor Image block allows images to be added from your computer or from the media library (ie already uploaded to WordPress). After uploading or choosing the image, alt text can be added, and other settings chosen in the block settings sidebar.

Alt Text is alternative text describing the image and is important for accessibility. It is also valuable for search engine optimisation. Alt Text is not automatically added for an image block. So it is important to enter this in the block settings in the sidebar whenever you add an image (unless the image is purely for decorative purposes).

Uploading the image and adding Alt Text may be all you need to do.

However there are other image settings which can help you manage the appearance of the image.

Image Caption

Image Captions can be added easily by clicking on the “Add Caption” icon in the block controls bar above the image block. This opens up the Caption area below the image, where you can type your caption, with handy formatting options, such as bold, italic and links.

Aspect Ratio

Aspect Ratio controls how the image will appear on the page. It can be in the original proportions, or in one of a number of width:height ratios, as supported by the theme. When the chosen Aspect Ratio is different from the original, the image will appear cropped to fit the chosen proportions.

Typical photograph proportions of 4:3 (or other landscape ratios where the width is larger than the height) can fit nicely across a website page. Portrait type ratios (where the height is larger than the width) provide a tall thin picture – this can work well where the picture is sitting beside some other content.

Aspect Ratio Examples

Original aspect ratio

1:1 (Square) aspect ratio

4:3 aspect ratio

3:2 aspect ratio

16:9 aspect ratio

Aspect Ratio 3:4

3:4 aspect ratio

An image with a portrait type aspect ratio can work well sitting next to other content, such as descriptive text. This image has 3:4 Aspect Ratio (and height 300px, to keep it at a reasonable size for this page).

Image Size (width or height)

By default, the image will be included at the full width of the containing content area (if the original image was large enough). The size of the image can be constrained by entering a value (in pixels) in either the Width or the Height fields (the other will be calculated automatically). If both Width and Height are entered, this is used as the Aspect Ratio value, overriding the selection in the Aspect Ratio dropdown.

The Image size can alternatively be chosen by picking from the standard media sizes generated when an image file is uploaded into WordPress. These sizes are offered in the Resolution dropdown.

Resolution

Image size, Resolution and Performance – the larger an image is (in dimensions and filesize ie MB), the longer it takes to appear on a page, and the more it slows the page’s performance. (This still applies today, despite faster internet speeds). For this reason, when an image is uploaded to WordPress, a set of additional images are generated from it, at pre-determined dimensions. When an image is used on a web page, the image displayed is usually one of this set of images, which fits the desired dimensions, rather than the full-size, original image.

The Resolution dropdown controls which one of the stored image sizes is used as the basis for the image which will be displayed on the web page.

Images are initially included at the Large image size (which is usually 1024px wide or tall, whichever is the largest dimension). This is generally a good choice for images which are intended to fill the content width of the page. For smaller images, it may be sufficient to use a smaller size, such as Medium. For images intended to fill the width of the browser screen, you may need to choose a larger size, perhaps even the Full size image.

If your image looks blurry, take a look at the Resolution dropdown and try a larger size. Or you only want a small version of the image, choose a smaller image size from the Resolution dropdown.

Other Image Blocks

See Block Editor – Images and Block Editor – Cover Images to read about other image blocks.

For our introduction to the block editor, see Beginning with the Block Editor and also Page Layout with the Block Editor.

12 October 2024
Footnotes
The WordPress Block Editor makes it easy to add footnotes or references at the bottom of a post. Footnotes can be added as you go, or at any time when editing, and appear in a block at the bottom of the page.

How to Add

This is a simple process. You type your content into the post, as normal.¹ When a particular sentence requires a footnote, follow these steps:-
1. Position the cursor within the paragraph where you want to link to a footnote.
2. Click on the More dropdown in the block controls bar to see the more advanced options.
3. From the dropdown list, choose Footnotes.
4. This automatically adds a superscript number at the cursor location, linked to a corresponding note text at the bottom of the post. The cursor is moved into the footnote block, where you can type the desired footnote content immediately.
5. List items can also have a footnote.²
Footnotes are numbered and linked automatically. Adding an extra one earlier in the content will cause all following footnotes to be renumbered automatically, without any additional effort.³

Deleting the footnote number within the main text automatically deletes the corresponding footnote content.

The Footnotes Block

A Footnotes block is created automatically, to sit at the bottom of the post content. Footnotes can be updated if necessary,⁴ simply by positioning the cursor on the footnote text and editing as desired.

The block can be styled, by positioning the cursor within the block and using the settings sidebar. For example, footnote text is often a little smaller than the main text and font size can be changed using the typography settings for the block.

More Information

For our introduction to the block editor, see Beginning with the Block Editor and Block Editor – Text and Formatting. Or see our guide to Page Layout with the block editor.
1. This is a footnote, typed directly into the footnote area of the page. ↩︎
2. List items can also have a footnote. ↩︎
3. Adding an extra footnote causes existing footnotes to be renumbered automatically. ↩︎
4. Footnotes can be edited and deleted easily. ↩︎
4 April 2024
Finding Your Way Around the Block Editor

The WordPress Block Editor provides several helpful methods for finding your way around the editor and ensuring you are interacting with the right block. These include the post breadcrumbs in the footer, the parent block icon in the block control bar, and the document overview.

Post Breadcrumbs

A quick way to establish exactly where you are in the block editor, is to view the post Breadcrumbs in the footer of the editor page. The breadcrumbs show the block where the cursor is located and which is the currently selected block.

You can easily see which block you are interacting with and, if necessary, click on a parent block to edit it instead.

Parent Block

Alternatively, for blocks which are nested inside other blocks (a list item, for example), you can click on the parent block’s icon in the block control bar, to select the parent block.

Click here to select the parent block

Document Overview

When your page contains a few more sophisticated blocks, such as Group blocks with nested blocks inside, it can sometimes be a little tricky to find and select the exact block you want to edit. The document list view (or document overview) provides an easy way to navigate within the editor.

Just click on the document overview icon in the top menu bar.

The document list view provides an easy way to view all of the blocks currently in your document and easily select a specific block, whether that is one of the containing blocks, or a block nested inside.

Blocks can easily be moved around the document, just by dragging to a different location. Drag a paragraph into or out of a group, drag an image into a column. If the block won’t “land” in the new destination, that’s probably because it isn’t valid eg trying to move a paragraph directly into a buttons block.

Click the document overview icon again or click the close button (x) to hide this window when you no longer need it.

Find the Right Block to Edit

Once the right block is selected, you can confidently edit its content, or access its settings in the settings sidebar, if desired.

More Information

For our introduction to the block editor, see Beginning with the Block Editor and Block Editor – Text and Formatting.

5 January 2024
Convert Existing Content into Blocks

What if your website has existing content which was written before the Block Editor came along? Or you have existing content and you want to migrate to a theme which supports the Block Editor.

Must You Convert Existing Content into Blocks?

You don’t HAVE to convert existing content into blocks – the page content will sit nicely protected within a Classic Block, and will continue to appear on the front end exactly as before.

It will look like this within the editor:-

You can even edit the content within the classic block, without ever converting it into individual blocks. Just click into the Classic block and you will see the menu bar of the classic editor at the top of your block. You can add, delete and edit sentences and paragraphs, and use all of the classic formatting controls, just as before.

How to Convert into Blocks

However, once you are familiar with the advantages in layout that come with using the block editor, you may well decide to convert a page into blocks before adding some new content.

Just click on the Convert to blocks option which appears when you click into that classic block. Conversion happens straight away, and you can usually see directly within the editor (before saving) whether the page content looks fine, or not.

Converting into blocks is a fairly simple process – however, be sure to look at the “converted” page in the front end, and be prepared to make some changes to correct any layout errors which may have cropped up.

A Few Gotchas

Even if it looks okay in the editor, it is always good practice to view the page on the front end to confirm that all is well.

Conversion to blocks is rarely troublesome, but there are some layouts which typically need a little correction, for example left- or right-aligned images, and galleries.

Left or Right Aligned Images

If you are inclined to include left- or right-aligned images within your content, these may well “fly off” to the side when converted into blocks.

BEFORE converting to blocks

AFTER converting to blocks

Generally, if you don’t want the image to sit outside of your content flow, you will need to revisit this section. Insert a Group or Column block and move the image and its accompanying text inside, or perhaps rework the content into a Media & Text block.

Galleries and Other Specialised Content

Another potentially troublesome page is one which includes an image gallery, as the Block Editor gallery uses different HTML to produce the gallery layout. The most effective approach here is to recreate the gallery using the Gallery block, which offers a variety of additional layout and functional options and is likely to provide a superior result, as a reward for those efforts.

Converting into Blocks

In conclusion, converting page content into blocks is generally a quick and easy process. But always make sure to view the converted page, in the front end, in different browser sizes and on mobile. Occasionally, additional editing is needed to get the content looking right in blocks.

26 August 2023
Copy from Word into the Block Editor
Many people like to write their content using a familiar program, such as Word or other word processing software. They write and edit the text until it is correct and readable, and then copy from Word and paste into the post or page in the WordPress website.

This approach can be used with the Block Editor just as easily as with the Classic WordPress editor.

Copy/Paste from Word in the Usual Way

Having written the content, you need only:-
1. Create a new post or page within the website
2. Select and copy the content from your Word document
3. Then paste the content into the website page (using either Ctrl-V on Windows or Cmd-V on Mac, or right-click within the editing box to see the menu and choose Paste)
Format the Content after Copy/Pasting from Word

Paragraphs, links, bold, italic, lists, tables and other formatting choices are readily carried over into the website page and the Block Editor will honour the formatting. Even headings can transfer nicely if they have been properly formatted within Word (ie use of Word Heading styles rather than just larger font size).

However it is usually best not to do too much formatting within Word, but rather concentrate on the text, and do more complex layout formatting after pasting the text into the website page.

Concentrate on writing the text within Word.
Then do the formatting, add images and any complex layouts after pasting the text into the website.

Ensure Content is Readable Online

If the content has been written originally with a view to being read as a document, consider that people generally read online content differently. You can make content easier to read online by:-
- Adding headings and subheadings
- Using lists
- Breaking up into bite-size chunks – short paragraphs and varied sentences
- Including images, either to break up a lot of text, or ideally to add extra meaning
Images Cannot be Copied from Word

Images within a Word document won’t copy/paste. Any images in your original document will be ignored, as images must be accessible online in order to be included in your page.

So if writing content with Word, leave adding any images until after the content has been pasted into the website. Then upload any desired image to the website, and include it in the right place on your page.

Writing in the Block Editor v Copying from Word

The block editor makes it relatively easy to write content directly within WordPress. Formatting options – headings, lists, bold, italic, alignment, tables – are all readily available directly within the editor, alongside many other useful layout tools – inclusion of images, use of columns, quotes, colour.

For our introduction to the block editor, see Beginning with the Block Editor and Block Editor – Text and Formatting. Or read more about Page Layout with the Block Editor.

Do you still need to write your content in Word?
Writing directly in the Block Editor is a pleasant experience, with formatting and layout tools readily at hand.
24 July 2023
Website Page Layout Helper Blocks
There are several minor blocks which can be very helpful in enhancing layouts, or meeting specific layout needs. I call these the Layout Helper Blocks. These are:-

More

Page Break

Separator

Spacer

They can be found in the Design section of blocks, or search for the desired block.

See here for the main page layout blocks.
Layout Helper Blocks

The Helper blocks – Spacer, Separator, Page Break and More – are explored below.

Spacer block

The Spacer block inserts a blank space between blocks – useful for adding white space for readability.

The spacer block – <div> with class wp-block-spacer – is 100px tall by default, and that value can be increased or decreased as desired.

Generally, paragraphs, headings and other blocks have a default margin, to space out content, and margins and padding can be changed on a per block basis. However there are times when it is useful to add a specific amount of space in a particular location, and the spacer block meets that need.

A spacer block has been added here, before the next heading.

Separator block

The Separator block is a simple line, tag <hr>, with the default margin and some optional styles. Colour and margin can be changed, if desired. Typically available styles are Default, Wide and Dots.

Default

Wide

Dots

Page Break block

Follow the page number links below, to see how the Page Break block works.

Pages: 1 2 3
18 June 2023
Block Editor – Columns Block

The Columns block can be very useful in helping to create attractive and interesting page layouts.

You may choose from a variety of column layouts. Number of columns and column widths can easily be changed later, in the settings. Up to 6 columns are supported natively.

The columns block has class wp-block-columns, the inner columns each having class wp-block-column. Sizing and spacing are managed by the editor and can be modified in the settings. All of the usual settings – colour, typography, dimensions (margin and padding), and also border – are available.

Example Columns Block with 3 Columns

Option 1

Some useful nformation about this first option.

Find Out More

Option 2

Learn more about this great option and consider this great benefit.

Find Out More

Option 3

A third alternative to consider – the last is often the best!

Find Out More

Columns on Mobile

On mobile devices, the columns rearrange to stack one on top of the other. This is optional and can be changed in the settings, but is usually desirable. The breakpoint is at 782px.

Column Vertical Alignment

One very useful option is the ability to set the vertical alignment of the content within the columns. This can be set for all columns overall, and also at the individual column level. Content can sit at the top, in the middle, or at the bottom.

This content is in 2 equal columns and the text is vertically centred.

Columns

This content is in two columns, the image in one column, the text in another.

The columns block is wrapped within a full-width group, which has the coloured background.

The inner columns are each 50% width (on desktop). The column containing the image is set to vertical-align bottom. The column containing the text is set to vertical-align middle.

Columns and Group blocks, along with Cover Image and Media & Text, are the blocks which are most useful in building page layouts. Read more about Page Layout with the Block Editor.

17 June 2023
Block Editor – Group Block

The Group block can be very useful in helping to create attractive and interesting page layouts.

You can start by inserting a Group block and then adding the desired blocks inside the group. Or you can transform an existing block into a Group block – this has the effect of wrapping the current block inside the group and can be very convenient if you have started to write content and then decided that you want to improve the layout.

Group Block

Group Example

This content is inside a Group block (class wp-block-group). Any blocks can be added inside the group block – this group block contains a heading and some paragraphs.

One common use case for a Group block is to group content together within a border or coloured background. It is usually good design practice to add some padding, to prevent text from nudging up against the edges of the block.

Full Width Group – Inner Blocks at Content Width

This group is set to Full width, with a coloured background and some padding. The inner content stays at the content width by default, based on the Inner blocks use content width setting.

The site content and wide width settings are used for nested blocks; if desired, specific values can be entered in the content and wide fields to cause different widths to be used.

All of the usual settings – colour, typography, dimensions (margin and padding), and also border – are available for the group block. In addition, there is a justification setting, which allows the content to be set to the left, right or centred (centred is the default and is the most commonly desirable option).

Read about Columns

Full Width Group – Inner Blocks Unrestricted

This group is similar to the one above, but with the Content Width restriction for inner blocks set Off.

The inner content will expand to fill the available space – one consequence may be that text lines are very long and become hard to read as a result – it is always worth checking content on various sizes of browser window – large, smaller and on mobile devices – to ensure that content looks good and is readable. Some left and right padding may be added automatically as part of the theme’s styling, or padding can be added in the group block’s settings.

Read about Columns

Group with Left-Aligned Image

This content is inside a content-width Group (content-width is the default setting).

If an image is left- or right-aligned, it is often handy to wrap the image and accompanying text in a group, to prevent the image from “floating off” to the far left or right of the browser window.

Background colour (with no padding, in this case) has been set on this group, to make it clear where the group starts and ends.

Group, Row, Stack or Grid

Row, Stack and Grid are variations of the Group block. You can transform a Group into a Row, a Stack or a Grid (and back again), in the settings.

Row

The Row block displays all of the content horizontally within the row. Content can be left, centred or right justified, or spaced out, as shown in the animation below.

Stack

The Stack block displays all of the inner content vertically. While this initially appears very similar to the same set of content in a normal Group block, it is styled with flexbox, which allows for some useful styling alternatives, such as with spacing.

Grid

The Grid block displays the inner content in a grid layout. You can choose the number of columns to display, or you can let WordPress manage that automatically, based on the width of the cells.

With Group, Row, Stack and Grid blocks, there are many combinations and variations of styling. If you can’t achieve what you are aiming for with a standard Group block, try transforming into a Row, Stack or Grid, and playing around with the settings.

Layouts

Groups, Rows, Columns, colour and images can be combined to achieve some very attractive page layouts.

Note that this section uses some additional CSS styling, to improve layout on mobile devices.

Group and Columns blocks, along with Cover Image and Media & Text, are the blocks which are most useful in building page layouts.

More Information

For our introduction to the block editor, see Beginning with the Block Editor and Block Editor – Text and Formatting. Or read more about Page Layout with the Block Editor.

4 June 2023