Purpose: Web editors can now add in Pages, Posts and Campaigns uniquely styled tables and Google Spreadsheets, listing a series of data with the P4 layout or campaign branding.

Important: For the “Spreadsheet Block, the source Spreadsheet must be published to render in P4 pages


Table Block

The Table block is a native Gutenberg block, allowing editors to include standard, responsive tables within Posts or Pages. You can add it by looking for “Table” in the Blocks option, under Formatting

The Table Block within the P4 available ones

Once added you can insert as many rows and columns as you wish, see a live example below

Default style 🙂TitleTitleTitleTitleTitle
Rowcellcellcellcellcell

Customize the table

Once inserted, you can change the appearance of the Table block using the commands on the right-side of your page / post

Right-side customisation commands for the Table block

Styles: You can select between “Default” (see table above), and Stripes (see below). The primary colour won’t change

Settings: You can decide whether to have a fixed width of the cell, have a Header row (which looks different from the other rows) and the footer section. See below how all 3 of these settings look like when activated

Header is the blue Stripe 🙂TitleTitleTitleTitleTitle
Rowcellcellcellcellcell
Footer row!

Content: you can obviously add or remove rows in the block commands, in the rich text add sub/superscripts, inline images or HTML code see below

Adding / removing rows
Rich text commands

Table background colours

By default you have 4 “Out of The Box” table colours, see below how they look like

Rowcellcellcellcellcell

[insert Background colours once available)


Spreadsheet Block

This block allows you to embed Google Spreadsheets right into your P4 posts, pages and campaigns.

To insert your block, search for “Spreadsheet” among the Planet 4 Blocks

The Spreadsheet block in the menu

The Editor will then ask you the link to a Google Spreadsheet, you will get that link by selecting File -> Publish on web.

If the Spreadsheet is not set as “Public”, content will not be shown.

KEY INFO – to display the content, the Spreadsheet must be set as “Public on the web”.

You can use this file as template 🙂

You can publish the entire sheet, or only one tab. That’s the link you need.

No need to choose the output format, any of them will work in the Spreadsheet block. Once you got the link, just paste it in the block settings, you should get an immediate preview, see below.

If your sheet is set as public, pasting the URL of the spreadsheet should immediately generate a preview.

If you make changes to the sheet after publishing it, these changes do not always immediately get reflected, even when “Automatically republish when changes are made” is checked. It may take a few minutes.

You can force an update by unpublishing and republishing the sheet. This will not change the sheet’s public url.


Features of the Spreadsheet block

Sorting

By clicking on each column, users will be able to sort the content of the Spreadsheet block, see .gif below.

Sorting in the Spreadsheet block

Search

In the search bar, users will be able to search for content, immediately sorting the table in real time, see .gif below.

Real-time searching in the Spreadsheet block

Styles of the Spreadsheet block

Default

People vs Oil

Forests

Arctic

Antarctic

Plastics

Oceans

screenshot-1.png
The Spreadsheet block rendering in The “Oceans” Campaign style

Design Elements

Content to be added

Links & resources

Handbook:

External links: