weblines

Editing Website Content

Tips and help for editing your website content in WordPress.

  • Responsive Grid

  • Grid

    Block Spacing Unset

    Grid set to Max columns: 3, Min column width: 10rem

    Block Spacing Set Specifically

    Grid set to Max columns: 3, Min column width: 10rem and Block spacing set to a specific value (of 1.4rem).

    Theme in Use

    Using the 2025 theme but with theme.json blockGap set to 1.4rem instead of 1.2rem.

  • Footnotes

    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.1 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.2
    Selecting footnotes from the block control bar dropdown

    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.3

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

    Footnotes iconThe Footnotes Block

    A Footnotes block is created automatically, to sit at the bottom of the post content. Footnotes can be updated if necessary,4 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 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. ↩︎

  • Lato Font

    This sentence is in the default, PT Sans font.

    And this sentence is in the Lato font regular.

    And this sentence is in the Lato font regular. No, it is in medium but it looks no different.

    And this sentence is in the Lato font light.

    And this sentence is in the Lato font semi bold.

    And this sentence is in the Lato font bold.

    And this sentence is in the Lato font black.

    Why is my heading so annoyingly close to the first paragraph – do I need to change some editor styling?

    And this is in one of the new fonts – Medieval Sharp – quite cute!

    Gap

    1. Position the cursor within the paragraph where you want the footnote indicator (number) to appear.
    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 corresponding footnote text at the bottom of the post. The cursor is moved into the footnote area, where you can type the desired footnote content immediately.
    5. List items can also have a footnote

    Small Gap

    1. Position the cursor within the paragraph where you want the footnote indicator (number) to appear.
    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 corresponding footnote text at the bottom of the post. The cursor is moved into the footnote area, where you can type the desired footnote content immediately.
    5. List items can also have a footnote

    No Gap

    1. Position the cursor within the paragraph where you want the footnote indicator (number) to appear.
    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 corresponding footnote text at the bottom of the post. The cursor is moved into the footnote area, where you can type the desired footnote content immediately.
    5. List items can also have a footnote
  • Finding Your Way Around the Block Editor

    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.

    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.

    WordPress block editor select 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.

    finding your way around the block editor using the document list view

    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

    WordPress block editor select the settings sidebar

    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.

  • Convert Existing Content into Blocks

    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:-

    Existing content in a classic block within the block 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.

    Editing existing content in a classic block within the block editor

    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 existing content into blocks within the block editor

    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.

    Page with left-aligned image before converting to blocks, showing image sitting within the content width
    BEFORE converting to blocks
    Page with left-aligned image after converting to blocks, showing image sitting off to the left of the main content.
    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.

  • 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 into WordPress

    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.

  • How to Schedule Posts in the Future

    How to Schedule Posts in the Future

    Going off on holiday and want your website to continue to display new content at regular times? With WordPress, it’s quite simple to prepare new website content and then schedule those posts to be published in the future.

    Once you have written your post and you are ready to publish it, open the settings sidebar in the editor and choose the Post or Page tab.

    Find the “Publish” line and click on the word Immediately (or possibly the date) which shows beside it. 

    Edit publish date to schedule a post in the future

    You can choose the date (and even time) that you want the post to appear live on your site. 

    Choose the date for your post to appear in the future

    After you have set your date and clicked on OK, the blue Publish button will change to Schedule.  When you click on that Schedule button, your post is scheduled to appear on your chosen date. 

    Schedule a post in the future

    You can set up a whole series of posts, to appear each day, week or month and then go off on your holiday and relax!

  • Website Page Layout Helper Blocks

    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.

    block editor layout blocks - columns, group, row, stack

    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

  • Block Editor – Columns Block

    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 information 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.

    Columns shown on mobile, stacked one on top of another.

    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.

    Sample image centred within its column in the columns block

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

    Image which is placed at the bottom of the column in the columns block

    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.