{"id":10199,"date":"2026-07-12T15:54:35","date_gmt":"2026-07-12T15:54:35","guid":{"rendered":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/?page_id=10199"},"modified":"2026-07-12T16:56:41","modified_gmt":"2026-07-12T16:56:41","slug":"gutenberg-blocks","status":"publish","type":"page","link":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/documentation-pro-version\/gutenberg-blocks\/","title":{"rendered":"Gutenberg blocks"},"content":{"rendered":"<p>TIP Countdown Generator Pro adds two dynamic Gutenberg blocks for displaying countdowns inside the WordPress block editor.<\/p>\n<ul>\n<li>TIP Countdown Generator Pro<\/li>\n<li>TIP Countdown Generator Pro Builder<\/li>\n<\/ul>\n<p>Both blocks are rendered dynamically by the plugin. Their output and remaining time are calculated when the page is loaded.<\/p>\n<p><strong>TIP Countdown Generator Pro block<\/strong><\/p>\n<div style=\"width: 750px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-10199-1\" width=\"750\" height=\"422\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-content\/uploads\/2026\/07\/tip-countdown-generator-pro-block.mp4?_=1\" \/><a href=\"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-content\/uploads\/2026\/07\/tip-countdown-generator-pro-block.mp4\">https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-content\/uploads\/2026\/07\/tip-countdown-generator-pro-block.mp4<\/a><\/video><\/div>\n<p><strong>What it does<\/strong><\/p>\n<p>Displays one countdown previously created and saved in the plugin panel.<\/p>\n<p><strong>When to use it<\/strong><\/p>\n<p>Use this block when the same countdown configuration must be reused on one or more pages. Changes made to the saved countdown in the plugin panel are reflected everywhere that countdown is used.<\/p>\n<p><strong>How to use it<\/strong><\/p>\n<ol>\n<li>Open the WordPress block editor.<\/li>\n<li>Click the add block button.<\/li>\n<li>Search for <strong>TIP Countdown Generator Pro<\/strong>.<\/li>\n<li>Insert the block.<\/li>\n<li>Open the <strong>Saved countdown<\/strong> section in the block sidebar.<\/li>\n<li>Select the countdown to display.<\/li>\n<li>Update or publish the page.<\/li>\n<\/ol>\n<p><strong>Countdown<\/strong><\/p>\n<p>Selects one of the countdowns created in the plugin panel. If no valid countdown is selected, the block displays a notice in place of the timer.<\/p>\n<p><strong>TIP Countdown Generator Pro Builder block<\/strong><\/p>\n<div style=\"width: 750px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-10199-2\" width=\"750\" height=\"422\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-content\/uploads\/2026\/07\/tip-countdown-generator-pro-block-builder.mp4?_=2\" \/><a href=\"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-content\/uploads\/2026\/07\/tip-countdown-generator-pro-block-builder.mp4\">https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-content\/uploads\/2026\/07\/tip-countdown-generator-pro-block-builder.mp4<\/a><\/video><\/div>\n<p><strong>What it does<\/strong><\/p>\n<p>Creates a custom evergreen, specific-date, or recurring countdown directly inside the block editor.<\/p>\n<p><strong>When to use it<\/strong><\/p>\n<p>Use this block when the countdown configuration is needed only in the current content and does not need to be managed from the plugin panel.<\/p>\n<p><strong>Important notes<\/strong><\/p>\n<p>The builder settings are stored in the page content. To reuse and centrally manage the same configuration on multiple pages, create a saved countdown and use the standard block instead.<\/p>\n<p>The builder automatically creates a unique countdown ID. The ID remains editable and distinguishes tracking data belonging to different evergreen countdowns.<\/p>\n<p><strong>Builder block sections<\/strong><\/p>\n<ul>\n<li>General<\/li>\n<li>Appearance<\/li>\n<li>Timer<\/li>\n<\/ul>\n<p><strong>General<\/strong><\/p>\n<ul>\n<li><strong>ID countdown<\/strong><br \/>\nIdentifies the countdown in the page markup and separates its evergreen tracking data from other countdowns. A unique value is generated automatically when the block is added, but it can be edited.<\/li>\n<\/ul>\n<p><strong>Appearance<\/strong><\/p>\n<ul>\n<li><strong>Countdown template<\/strong><br \/>\nSelects the frontend countdown layout.<br \/>\n<strong>Available options<\/strong><br \/>\nStandard<br \/>\nAnimated Flip<br \/>\nFlip Clock<br \/>\nTypewriter<br \/>\nPaper<\/li>\n<li><strong>Alignment<\/strong><br \/>\nAligns the countdown to the left, center, or right.<\/li>\n<li><strong>Separators<\/strong><br \/>\nShows or hides the colon separators between time units.<\/li>\n<li><strong>Include appearance options<\/strong><br \/>\nEnables the custom appearance values listed below. Disable it to use the template defaults.<\/li>\n<li><strong>Number font size<\/strong><br \/>\nSets the number size in pixels.<\/li>\n<li><strong>Label font size<\/strong><br \/>\nSets the time-unit label size in pixels.<\/li>\n<li><strong>Cell background color<\/strong><br \/>\nSets the background color of the countdown cells.<\/li>\n<li><strong>Number text color<\/strong><br \/>\nSets the text color of the countdown numbers.<\/li>\n<li><strong>Label text color<\/strong><br \/>\nSets the text color of the time-unit labels.<\/li>\n<li><strong>Separator text color<\/strong><br \/>\nSets the color of the separators displayed outside the cells.<\/li>\n<li><strong>Border radius<\/strong><br \/>\nSets the cell corner radius in pixels.<\/li>\n<li><strong>Margin top<\/strong><br \/>\nAdds space above the countdown in pixels.<\/li>\n<li><strong>Margin bottom<\/strong><br \/>\nAdds space below the countdown in pixels.<\/li>\n<\/ul>\n<p>The custom appearance controls are visible only when <strong>Include appearance options<\/strong> is enabled.<\/p>\n<p><strong>Timer<\/strong><\/p>\n<p><strong>Countdown type<\/strong><\/p>\n<ul>\n<li><strong>Evergreen<\/strong><br \/>\nStarts a personal countdown from the visitor&#8217;s first tracked visit.<\/li>\n<li><strong>Specific date<\/strong><br \/>\nCounts down to one absolute date and time using the site timezone.<\/li>\n<li><strong>Recurring<\/strong><br \/>\nRuns repeated countdown windows according to a schedule.<\/li>\n<\/ul>\n<p><strong>Evergreen settings<\/strong><\/p>\n<ul>\n<li><strong>Evergreen days<\/strong><br \/>\nSets the day portion of the personal duration.<\/li>\n<li><strong>Evergreen hours<\/strong><br \/>\nSets the hour portion of the personal duration.<\/li>\n<li><strong>Evergreen minutes<\/strong><br \/>\nSets the minute portion of the personal duration.<\/li>\n<li><strong>Evergreen seconds<\/strong><br \/>\nSets the second portion of the personal duration.<\/li>\n<li><strong>Tracking method<\/strong><br \/>\nDetermines how the first visit is recognized and how the countdown start time is shared.<\/li>\n<\/ul>\n<p><strong>Tracking methods<\/strong><\/p>\n<ul>\n<li><strong>Cookie<\/strong><br \/>\nAssociates the countdown start time with a browser cookie. A different browser or private session receives a separate countdown.<\/li>\n<li><strong>IP<\/strong><br \/>\nAssociates the start time with the visitor&#8217;s anonymized IP address. Visitors sharing the same IP also share the countdown start time.<\/li>\n<li><strong>Cookie or IP<\/strong><br \/>\nUses both identifiers and keeps the earliest available start time. A known IP can initialize a new cookie, while an existing cookie can preserve the start time after a network change.<\/li>\n<li><strong>Logged-in user<\/strong><br \/>\nAssociates the start time with the WordPress account, so it follows the user across browsers and devices. Visitors who are not logged in fall back to cookie tracking.<\/li>\n<\/ul>\n<p>Tracking applies only to evergreen countdowns. The countdown ID is part of every tracking key, so different IDs maintain independent start times.<\/p>\n<p><strong>Specific date settings<\/strong><\/p>\n<ul>\n<li><strong>End date\/time<\/strong><br \/>\nSets the absolute date and time when the countdown reaches zero. The site timezone is used.<\/li>\n<\/ul>\n<p><strong>Recurring settings<\/strong><\/p>\n<ul>\n<li><strong>Repeat every<\/strong><br \/>\nSets the recurrence interval.<\/li>\n<li><strong>Recurrence unit<\/strong><br \/>\nRepeats the schedule in days or weeks.<\/li>\n<li><strong>Duration days, hours, minutes, and seconds<\/strong><br \/>\nDefine how long each active countdown window lasts.<\/li>\n<li><strong>Restart delay days, hours, minutes, and seconds<\/strong><br \/>\nDefine the pause between the end of one active window and the next restart.<\/li>\n<li><strong>Run on days<\/strong><br \/>\nSelects the weekdays on which the countdown is allowed to run.<\/li>\n<li><strong>On the unselected day(s)<\/strong><br \/>\n<strong>Countdown to the next selected day<\/strong> displays the time remaining before the next allowed day.<br \/>\n<strong>Hide the countdown timer<\/strong> removes the timer on unselected days.<\/li>\n<li><strong>Before start<\/strong><br \/>\n<strong>Hide timer completely<\/strong> hides all output before the scheduled start.<br \/>\n<strong>Show message only<\/strong> displays only the waiting message.<br \/>\n<strong>Show message and countdown to start<\/strong> displays the waiting message and the time remaining before the active countdown starts.<\/li>\n<li><strong>Waiting message<\/strong><br \/>\nSets the message displayed before the scheduled start when the selected behavior includes a message.<\/li>\n<li><strong>Start date\/time<\/strong><br \/>\nSets the initial date and time used to build the recurring schedule.<\/li>\n<li><strong>Timezone<\/strong><br \/>\nUses either the site timezone or a selected custom timezone.<\/li>\n<li><strong>Custom timezone<\/strong><br \/>\nSelects the timezone used by the schedule when custom timezone mode is enabled.<\/li>\n<li><strong>Ends<\/strong><br \/>\n<strong>Never<\/strong> keeps the recurring series active.<br \/>\n<strong>After recurrences<\/strong> stops it after the selected number of occurrences.<br \/>\n<strong>On date<\/strong> stops it at the selected date and time.<\/li>\n<li><strong>End after<\/strong><br \/>\nSets the maximum number of recurrences when <strong>After recurrences<\/strong> is selected.<\/li>\n<li><strong>End on date\/time<\/strong><br \/>\nSets the final date and time when <strong>On date<\/strong> is selected.<\/li>\n<\/ul>\n<p><strong>Action on expiry<\/strong><\/p>\n<p>Controls what happens when an evergreen or specific-date countdown expires, or when a recurring series reaches its final end condition.<\/p>\n<ul>\n<li><strong>Do nothing<\/strong><br \/>\nKeeps the expired countdown visible at zero.<\/li>\n<li><strong>Hide the timer<\/strong><br \/>\nRemoves the countdown from the page.<\/li>\n<li><strong>Redirect to a URL<\/strong><br \/>\nRedirects the visitor to the URL entered in <strong>Redirect URL<\/strong>.<\/li>\n<li><strong>Display a message<\/strong><br \/>\nReplaces the timer with the content entered in <strong>Expiry message<\/strong>.<\/li>\n<\/ul>\n<p><strong>Alignment<\/strong><\/p>\n<p>Both Gutenberg blocks support wide and full alignment. Availability and final width depend on the active WordPress theme.<\/p>\n<p><strong>License notice<\/strong><\/p>\n<p>An active TIP Countdown Generator Pro license is required to insert or edit these blocks. Existing blocks continue rendering on the frontend when the license is inactive, but their settings remain locked in the editor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>TIP Countdown Generator Pro adds two dynamic Gutenberg blocks for displaying countdowns inside the WordPress block editor. TIP Countdown Generator Pro TIP Countdown Generator Pro Builder Both blocks are rendered dynamically by the plugin. Their output and remaining time are calculated when the page is loaded. TIP Countdown Generator Pro block What it does Displays&hellip; <a class=\"more-link\" href=\"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/documentation-pro-version\/gutenberg-blocks\/\">Continue reading <span class=\"screen-reader-text\">Gutenberg blocks<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":10007,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10199","page","type-page","status-publish","hentry","entry"],"_links":{"self":[{"href":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-json\/wp\/v2\/pages\/10199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-json\/wp\/v2\/comments?post=10199"}],"version-history":[{"count":3,"href":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-json\/wp\/v2\/pages\/10199\/revisions"}],"predecessor-version":[{"id":10215,"href":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-json\/wp\/v2\/pages\/10199\/revisions\/10215"}],"up":[{"embeddable":true,"href":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-json\/wp\/v2\/pages\/10007"}],"wp:attachment":[{"href":"https:\/\/demo.themeinprogress.eu\/tip-countdown-generator-pro\/wp-json\/wp\/v2\/media?parent=10199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}