PublishPress Blocks is a plugin that adds over 20 extra blocks to the Gutenberg interface, along with custom layouts, CSS styles, and permissions for blocks.
There are many Gutenberg plugins available, but PublishPress Blocks is different. This plugin has a strong focus on being useful for publishers and content creators.
If you want to see an example of this content focus, check out the Content Display block. This really is the best way to show your content in a block.
With the PublishPress Countdown Block, you can create a highly customizable countdown to an event. This block is available in PublishPress Blocks Pro. This image below is a preview of how the block will appear inside the WordPress editing screen.
How to create the PublishPress Countdown block
You can create a PublishPress Countdown block by clicking the “Countdown – PublishPress” button in the PublishPress Blocks category.
The event date and timer are generated automatically based on the Date time from the sidebar.
Settings for the PublishPress Countdown block
Once created, you can adjust the date and time, timer, font size, colors, labels, format and more. This from the sidebar.
Date time: choose the date and time for the event.
Timer Settings
Days and time display: choose between “all in the same line” and “split in two lines”.
Font Size for days: available when “Days and time display” is “split in two lines”.
Line Height for days: available when “Days and time display” is “split in two lines”.
Font Size for hours, minutes, seconds
Line Height for hours, minutes, seconds
Separator: separator between hours, minutes and seconds. Choose between colon, slash, hyphen, vertical line, empty space and none.
Time has come: custom message to display when countdown comes to 00:00:00.
Display days label: enabled/disable the label for days.
Days label (plural): custom label to replace “days” word.
Day label (singular): custom label to replace “day” word.
Display hours, minutes, seconds labels: enabled/disable the label for hours, minutes, seconds labels.
Hours label (plural): custom label to replace “hours” word.
Hour label (singular): custom label to replace “hour” word.
Minutes label (plural): custom label to replace “minutes” word.
Minute label (singular): custom label to replace “minute” word.
Seconds label: custom label to replace “seconds” word.
Event Settings
Image: enabled/disable the image.
Image Width (px)
Title: enabled/disable the title.
Title Tag: choose the html tag for the title.
Event Date: enabled/disable the event date.
Event Date Tag: choose the html tag for the event date.
Date Format: choose the format for the date that is displayed.
Description: enabled/disable the description.
Button: enabled/disable the button. This button is an PublishPress Button block with its own set of customizations. Select this block on the editor to access its settings.
Color Settings
Title Color
Event Date Color
Description Color
Timer Color
Background Color
Padding
Padding top
Padding right
Padding bottom
Padding left
Border
Border radius
Border style: choose between solid, dotted, dashed, double, groove, ridge, inset and outset.
Border Color: when Border style is different to “none”, this field will allow you to choose a custom color.
Edit content for the PublishPress Countdown block
Click over the clock to choose a custom image.
You can change the “Event's title” like you do with regular headings.
Type a custom description like you do with regular text.
Click on the PublishPress Button to customize the text.
On the sidebar you can customize the button. Here you have the same settings from a regular PublishPress Button block.
