{"id":1960925,"date":"2024-07-23T00:44:13","date_gmt":"2024-07-23T04:44:13","guid":{"rendered":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/?p=1960925"},"modified":"2024-08-20T11:14:18","modified_gmt":"2024-08-20T15:14:18","slug":"an-introduction-to-event-blocks-legacy","status":"publish","type":"post","link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/an-introduction-to-event-blocks-legacy\/","title":{"rendered":"An Introduction to Event Blocks"},"content":{"rendered":"\n<p>The WordPress 5.0 release introduced a new block editing interface to the platform.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"alignright\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2018\/12\/Screen-Shot-2018-12-04-at-8.27.24-PM-e1543984117727-249x300.png\" alt=\"event blocks\"\/><\/figure><\/div>\n<p>What this really means: the content creation experience in WordPress is changing! Instead of all your content being input into a single field, each element will now live in its own block and can be moved, edited, and styled independently.<\/p>\n\n<p>In response, we&#8217;ve built a full set of Event blocks so that you can start building events in the block editor and unleash all of the exciting layout possibilities\u2014no code required.<\/p>\n\n<p><em>Note: For users of Event Tickets, we also have a complete set of <a href=\"https:\/\/staging.theeventscalendar.com\/knowledgebase\/k\/an-introduction-to-tickets-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tickets blocks<\/a>.<\/em><\/p>\n\n<h3 class=\"wp-block-heading\" id=\"date-time\">The Event Date Time block<\/h3>\n\n<p>The Event Date Time block is essential to any event since it&#8217;s where you&#8217;ll define the date, time, and duration of the event itself. For Pro users, it&#8217;s also where you&#8217;ll find recurring event options.<\/p>\n\n<p>You can set the date and time by clicking on the calendar and using the time dropdowns, or by typing into the field at the top.&nbsp;If the event lasts for a full day, you can select All Day from the start time dropdown.&nbsp;Flip the multi-day toggle and you&#8217;ll be able to select a start date and end date to create a multi-day event.<\/p>\n\n<p>Users with Events Calendar Pro will see an option in the block dashboard to&nbsp;<em>Repeat This Event.&nbsp;<\/em>Inside that section, you&#8217;ll find all options for creating recurrence rules and exceptions- everything you need for setting up your recurring events.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/02\/KB-The-Event-Date-Time-block.png\" alt=\"The Event Date Time block\" class=\"wp-image-1945599\"\/><figcaption class=\"wp-element-caption\">The Event Date Time block<\/figcaption><\/figure>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2020\/02\/KB-Creating-an-all-day-event.png\" alt=\"Creating an all-day event with event blocks\" class=\"wp-image-1945600\"\/><figcaption class=\"wp-element-caption\">Creating an all-day event<\/figcaption><\/figure>\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/knowledgebase\/wp-content\/uploads\/2020\/02\/KB-multi-day-event-1024x722.png\" alt=\"Creating a multi-day event with an event block\" class=\"wp-image-1945601\"\/><figcaption class=\"wp-element-caption\">Creating a multi-day event<\/figcaption><\/figure>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/05\/Screen-Shot-2022-05-23-at-7.36.55-AM.png\" alt=\"Creating a recurring event\" class=\"wp-image-1952944\"\/><figcaption class=\"wp-element-caption\">Creating a recurring event<\/figcaption><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"venue\">The Event Venue block<\/h3>\n\n<p>Display your event&#8217;s location with the Event Venue block. As you start typing, the block will list existing venues matching that name or allow you to create a brand-new venue from within the block.&nbsp;You can choose to display a map or map link from the sidebar block settings.<\/p>\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2018\/12\/Screen-Shot-2018-12-04-at-5.14.23-PM.png\" alt=\"Using the venue event block\" style=\"width:602px;height:217px\"\/><figcaption class=\"wp-element-caption\">Add an existing venue<\/figcaption><\/figure>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2018\/12\/Screen-Shot-2018-12-04-at-8.11.44-PM.png\" alt=\"Using the venue event block\"\/><figcaption class=\"wp-element-caption\">Venue block preview and settings<\/figcaption><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"organizer\">The Event Organizer block<\/h3>\n\n<p>The Event Organizer\u2014surprise!\u2014allows you to set and display an organizer for your event. Just like the Venue block, you can select from existing organizers or create a new one.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2018\/12\/Screen-Shot-2018-12-04-at-5.19.33-PM-665x305.png\" alt=\"Using the event organizer block\"\/><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"price\">The Event Price block<\/h3>\n\n<p>The Event Price block lets you display the event price as well as an optional price description. You can also use the price description field if your event has a non-monetary price, such as&nbsp;<em>By Donation.<\/em><\/p>\n\n<p>As you type into the fields in the dashboard, the preview content will update to reflect the content.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2018\/12\/Screen-Shot-2018-12-04-at-5.22.04-PM-665x256.png\" alt=\"The event price block\"\/><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"website\">The Event Website block<\/h3>\n\n<p>If your event has an external website, you can easily link to it with the Event Website block. This block creates a linked button complete with a custom label.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/11\/image-17.png\" alt=\"Event Website block\" class=\"wp-image-1954531\"\/><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"sharing\">The Event Sharing block<\/h3>\n\n<p>The Event Sharing block allows you to position and customize the Google Calendar and iCal subscribe buttons. You can choose to change the labels, hide one of the options, or just remove the block entirely.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2022\/02\/Screen-Shot-2022-02-18-at-7.27.25-AM.png\" alt=\"The event sharing block\" class=\"wp-image-1952074\"\/><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"categories\">The Event Categories block<\/h3>\n\n<p>If you&#8217;ve added Event Categories to your event via the Document Settings sidebar and want to also display them in the event content, you can do so by adding the Event Categories block.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/11\/Screen-Shot-2021-11-29-at-11.41.12-AM.png\" alt=\"Event categories block\" class=\"wp-image-1951313\"\/><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"tags\">The Tags block<\/h3>\n\n<p>You can also add tags to your event in the Document Settings sidebar. You can then display them right in your event content by adding the Tags block.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"related-events\">The Related Events block<\/h3>\n\n<p>Events Calendar Pro users can use this block to display upcoming events of the same categories and tags as the current event. Up to three events will be displayed. If no upcoming events share categories or tags with the current event, then none will be displayed.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&quot;additional\">The Additional Fields blocks<\/h3>\n\n<p>If you have Events Calendar Pro, you have access to the new custom Additional Fields blocks. These blocks are automatically created when you configure a custom Additional Field under <strong>Events &#8211;&gt; Settings &#8211;&gt; Additional Fields<\/strong>. The new block will have the same title you entered, and allow the event creation to choose from the options outlined in the settings.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2018\/12\/Screen-Shot-2018-12-04-at-8.33.51-PM.png\" alt=\"Additional Fields block\"\/><\/figure>\n\n<p><br>Additional Fields have their own section in the inserter tool<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2018\/12\/Screen-Shot-2018-12-04-at-8.34.23-PM.png\" alt=\"Additional fields event block\"\/><figcaption class=\"wp-element-caption\">An example of a dropdown-type Additional Field<\/figcaption><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"h-the-virtual-event-placeholder-block\">The Virtual Event Placeholder Block<\/h3>\n\n<p>With our Virtual Events plugin, you can add a virtual event block to your event. <\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/10\/Screen-Shot-2021-10-05-at-2.41.17-PM.png\" alt=\"Virtual Event placeholder block\" class=\"wp-image-1951046\" style=\"width:329px;height:320px\"\/><\/figure><\/div>\n<p>Once you select the block, fill out the virtual event information at the bottom of the page. <\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/10\/Screen-Shot-2021-10-05-at-2.42.41-PM.png\" alt=\"Virtual Event placeholder block\" class=\"wp-image-1951047\"\/><\/figure>\n\n<p>Then you can move the block to anywhere you&#8217;d like on the page.<\/p>\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2021\/10\/Screen-Shot-2021-10-05-at-2.42.19-PM.png\" alt=\"Virtual Event placeholder block\" class=\"wp-image-1951048\"\/><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"details-classic\">Transitioning your existing events with the Event Details Classic block<\/h3>\n\n<p>If you have an event that was originally made in the classic editor and then you open it with the block editor, it will load using a special block- the Event Details Classic block. This block mimics the layout of event information from before WordPress 5.0.<\/p>\n\n<p>If you want, you can keep this layout by simply saving the event. You may also choose to add some of the more specific and flexible blocks like those above or use the new blocks to entirely replace the classic layout. If you use a combination of new blocks with the Event Details Classic block, content will sync between corresponding elements. For example, if you update the event&#8217;s price in the Event Price block, that change will be reflected in the Event Details Classic block too.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.theeventscalendar.com\/kb\/uploads\/2018\/12\/Screen-Shot-2018-12-04-at-8.46.27-PM-665x269.png\" alt=\"Classic event details block\"\/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The WordPress 5.0 release introduced a new block editing interface to the platform. What this really means: the content creation experience in WordPress is changing! Instead of all your content being input into a single field, each element will now live in its own block and can be moved, edited, and styled independently. In response,&#8230;<\/p>\n","protected":false},"author":77,"featured_media":1955565,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_swpsp_post_exclude":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"ep_exclude_from_search":true,"footnotes":""},"categories":[130],"tags":[113],"stellar-product-taxonomy":[158,161],"class_list":["post-1960925","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advanced-post-manager","tag-block-editor","stellar-product-taxonomy-events-calendar-pro","stellar-product-taxonomy-the-events-calendar"],"acf":[],"taxonomy_info":{"category":[{"value":130,"label":"Managing Events"}],"post_tag":[{"value":113,"label":"block editor"}],"stellar-product-taxonomy":[{"value":158,"label":"Events Calendar Pro"},{"value":161,"label":"The Events Calendar"}]},"featured_image_src_large":["https:\/\/images.theeventscalendar.com\/kb\/uploads\/2023\/02\/social-share-1024x538.png",1024,538,true],"author_info":{"display_name":"TEC Staff","author_link":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/author\/tec_staff\/"},"comment_info":0,"category_info":[{"term_id":130,"name":"Managing Events","slug":"advanced-post-manager","term_group":0,"term_taxonomy_id":130,"taxonomy":"category","description":"","parent":61,"count":44,"filter":"raw","term_order":"0","cat_ID":130,"category_count":44,"category_description":"","cat_name":"Managing Events","category_nicename":"advanced-post-manager","category_parent":61}],"tag_info":[{"term_id":113,"name":"block editor","slug":"block-editor","term_group":0,"term_taxonomy_id":113,"taxonomy":"post_tag","description":"","parent":27,"count":17,"filter":"raw","term_order":"0"}],"_links":{"self":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1960925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/comments?post=1960925"}],"version-history":[{"count":5,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1960925\/revisions"}],"predecessor-version":[{"id":1962544,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/posts\/1960925\/revisions\/1962544"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media\/1955565"}],"wp:attachment":[{"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/media?parent=1960925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/categories?post=1960925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/tags?post=1960925"},{"taxonomy":"stellar-product-taxonomy","embeddable":true,"href":"https:\/\/staging.theeventscalendar.com\/knowledgebase\/wp-json\/wp\/v2\/stellar-product-taxonomy?post=1960925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}