  {"id":19955,"date":"2023-11-28T14:29:10","date_gmt":"2023-11-28T19:29:10","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?p=19955"},"modified":"2026-04-08T07:08:43","modified_gmt":"2026-04-08T11:08:43","slug":"back-end-block-checks-helping-you-to-help-your-website","status":"publish","type":"post","link":"https:\/\/carleton.ca\/webservices\/2023\/back-end-block-checks-helping-you-to-help-your-website\/","title":{"rendered":"Back end block checks: helping you to help your website"},"content":{"rendered":"\n<section class=\"w-screen px-6 cu-section cu-section--white ml-offset-center md:px-8 lg:px-14\">\n    <div class=\"space-y-6 cu-max-w-child-5xl  md:space-y-10 cu-prose-first-last\">\n\n            <div class=\"cu-textmedia flex flex-col lg:flex-row mx-auto gap-6 md:gap-10 my-6 md:my-12 first:mt-0 max-w-5xl\">\n        <div class=\"justify-start cu-textmedia-content cu-prose-first-last\" style=\"flex: 0 0 100%;\">\n            <header class=\"font-light prose-xl cu-pageheader md:prose-2xl cu-component-updated cu-prose-first-last\">\n                                    <h1 class=\"cu-prose-first-last font-semibold !mt-2 mb-4 md:mb-6 relative after:absolute after:h-px after:bottom-0 after:bg-cu-red after:left-px text-3xl md:text-4xl lg:text-5xl lg:leading-[3.5rem] pb-5 after:w-10 text-cu-black-700 not-prose\">\n                        Back end block checks: helping you to help your website\n                    <\/h1>\n                \n                                \n                            <\/header>\n\n                    <\/div>\n\n            <\/div>\n\n    <\/div>\n<\/section>\n\n\n\n<p>If you clicked on the headline for this post and expected an article on a player who stops the quarterback from scoring a touchdown then congratulations &#8211; you know less about American football than I do (and that is quite the achievement). Instead, today we are talking about a new feature that you will see in the new <a href=\"https:\/\/carleton.ca\/webservices\/category\/cutheme\/\" target=\"_blank\" rel=\"noopener noreferrer\">cuTheme template<\/a> when it is launched.<\/p>\n\n\n\n<h2 id=\"what-is-a-back-end-block-check\" class=\"wp-block-heading\">What is a back end block check?<\/h2>\n\n\n\n<p>In the new template we are employing WordPress&#8217; latest administration interface. This uses blocks &#8211; components which house each individual piece of content that can be edited separately and which together compose the page. (You can <a href=\"https:\/\/carleton.ca\/webservices\/2021\/things-youll-love-about-cutheme\/\" target=\"_blank\" rel=\"noopener noreferrer\">read more about our adoption of WordPress&#8217; Gutenberg interface<\/a>.)<\/p>\n\n\n\n<p>That&#8217;s the back end block. The check aspect is a small function we use to ensure that any block created on a page goes out into the world as its creator intended.<\/p>\n\n\n\n<h2 id=\"what-does-the-check-do\" class=\"wp-block-heading\">What does the check do?<\/h2>\n\n\n\n<p>The function works to make sure an element is not added to the page which makes the page less accessible. As with all aspects of accessibility, making the page better for those with disabilities makes it better for everyone else.<\/p>\n\n\n\n<p>That is what the check does &#8211; makes sure a component, for example, isn&#8217;t published with no text in it, or if it is supposed to have a hyperlink attached, that this is present.<\/p>\n\n\n\n<h2 id=\"an-example-the-button-block\" class=\"wp-block-heading\">An example: the button block<\/h2>\n\n\n\n<p>As with every component on a page in cuTheme, to add a button you now employ a block to do so. Handily, our developers named this the&nbsp;<em>Button block.<\/em> On the front end of the site it looks like this:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/button2-240x206.png\" alt=\"button on the front end of the post\" class=\"wp-image-19960\"\/><\/figure>\n\n\n\n<p>And here is how it appears when you are editing the page in the back end:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/button-backend-240x243.png\" alt=\"Red button on the back end of the page\" class=\"wp-image-19962\"\/><\/figure>\n\n\n\n<p>(Let&#8217;s just take a hot second to admire the neat thing about Gutenberg: the back end as you edit it looks so much like the front end, you have a much clearer idea of how your page or post will look before you hit the <strong>Update <\/strong>button!)<\/p>\n\n\n\n<p>Anyway, that is how the button is supposed to look in the back end. What happens, though, if you fail to add text or a URL to the attributes of the button? You get back end check blocked, that&#8217;s what happens!:<\/p>\n\n\n\n<p>If I remove the URL:<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img decoding=\"async\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/button-error-no-url-400x80.png\" alt=\"Alert when a button has no URL. Error reads: Accessibility Error: Buttons must have text and URL\" class=\"wp-image-19963\"\/><\/figure>\n\n\n\n<p>Meanwhile, in the top right hand corner of the admin screen you will notice something else going on when there is no URL or text. I this example I have added neither:<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img loading=\"lazy\" decoding=\"async\" width=\"2514\" height=\"746\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.01.00-AM.png\" alt=\"The Publish slash update button is greyed out\" class=\"wp-image-20028\" srcset=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.01.00-AM.png 2514w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.01.00-AM-512x152.png 512w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.01.00-AM-1024x304.png 1024w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.01.00-AM-320x95.png 320w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.01.00-AM-768x228.png 768w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.01.00-AM-1536x456.png 1536w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.01.00-AM-2048x608.png 2048w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.01.00-AM-360x107.png 360w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-29-at-8.01.00-AM-200x59.png 200w\" sizes=\"auto, (max-width: 2514px) 100vw, 2514px\" \/><\/figure>\n\n\n\n<p>That&#8217;s right: the Publish\/Update button remains greyed out until there is entries for text and a URL are inserted.<\/p>\n\n\n\n<h2 id=\"whats-another-example\" class=\"wp-block-heading\">What&#8217;s another example?<\/h2>\n\n\n\n<p>If you use the video embed block you can place a video player, cued to display your chosen video when the page loads. The stipulation is however that the video link you embed must be from one of the providers the University wants us to accommodate: YouTube, Vimeo, Kaltura, or TED.<\/p>\n\n\n\n<p>So, if we add something that is not a valid URL, first of all, we will see the checker block the page from being saved:<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img loading=\"lazy\" decoding=\"async\" width=\"2000\" height=\"470\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.39.09-AM.png\" alt=\"An error message is displayed, telling the user to please enter a valid embed URL\" class=\"wp-image-19978\" srcset=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.39.09-AM.png 2000w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.39.09-AM-512x120.png 512w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.39.09-AM-1024x241.png 1024w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.39.09-AM-320x75.png 320w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.39.09-AM-768x180.png 768w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.39.09-AM-1536x361.png 1536w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.39.09-AM-360x85.png 360w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.39.09-AM-200x47.png 200w\" sizes=\"auto, (max-width: 2000px) 100vw, 2000px\" \/><\/figure>\n\n\n\n<p>And the same is true if we include a URL which is technically valid, but which doesn&#8217;t point to a YouTube, Vimeo, Kaltura or TED address. For instance, from the rogue video website, TheyTube instead of YouTube:<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img loading=\"lazy\" decoding=\"async\" width=\"2116\" height=\"1186\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.59.22-AM.png\" alt=\"Error message on the block pus the publish button is greyed out.\" class=\"wp-image-19982\" srcset=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.59.22-AM.png 2116w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.59.22-AM-512x287.png 512w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.59.22-AM-1024x574.png 1024w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.59.22-AM-320x179.png 320w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.59.22-AM-768x430.png 768w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.59.22-AM-1536x861.png 1536w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.59.22-AM-2048x1148.png 2048w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.59.22-AM-360x202.png 360w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-9.59.22-AM-200x112.png 200w\" sizes=\"auto, (max-width: 2116px) 100vw, 2116px\" \/><\/figure>\n\n\n\n<p>Again, that error message appears, but check out what also happens with back end checks: you notice the&nbsp;<strong>Update<\/strong> button in the top right is greyed out. Tht&#8217;s right &#8211; you can&#8217;t save the page while that error exists.<\/p>\n\n\n\n<h2 id=\"table-manners\" class=\"wp-block-heading\">Table manners<\/h2>\n\n\n\n<p>Here is one more example of something we have programmed in to check that blocks and their content are valid. Tables, which are there to display tabular data and not to lay out a page, must have properly defined column headings. This is for accessibility&#8217;s sake &#8211; users employing screen readers hear potentially misleading information about tables without column headers.<\/p>\n\n\n\n<p>Therefore placeholder text is in the column header cells to remind you to add text to label the headers (with the imaginative text of <strong>Header label<\/strong>).<\/p>\n\n\n\n<p>We hope you share our understanding that these checks will enable our community to create even more accessible and usable content as we move all our sites into cuTheme.<\/p>\n\n\n\n<figure class=\"wp-block-image alignleft\"><img loading=\"lazy\" decoding=\"async\" width=\"1948\" height=\"596\" src=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-10.10.06-AM.png\" alt=\"Table with headings labelled by default\" class=\"wp-image-19984\" srcset=\"https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-10.10.06-AM.png 1948w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-10.10.06-AM-512x157.png 512w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-10.10.06-AM-1024x313.png 1024w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-10.10.06-AM-320x98.png 320w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-10.10.06-AM-768x235.png 768w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-10.10.06-AM-1536x470.png 1536w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-10.10.06-AM-360x110.png 360w, https:\/\/carleton.ca\/webservices\/wp-content\/uploads\/sites\/3\/Screen-Shot-2023-11-22-at-10.10.06-AM-200x61.png 200w\" sizes=\"auto, (max-width: 1948px) 100vw, 1948px\" \/><\/figure>\n\n\n\n<p>You can still leave these blank but you will find the button to update or publish the page is greyed out. This is a measure to protect accessibility of the page, of course, so we know you will understand why this measure has been implemented.<\/p>\n\n\n\n<p>These are some of the blocks you will encounter in cuTheme and some of the ways we ensure they are released into the wild in good working order, insuring more usable and accessible content. The other portion of that insurance is all the amazing website content editors on campus continuing to create great, usable, and accessible content!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you clicked on the headline for this post and expected an article on a player who stops the quarterback from scoring a touchdown then congratulations &#8211; you know less about American football than I do (and that is quite the achievement). Instead, today we are talking about a new feature that you will see [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":"","_links_to":"","_links_to_target":""},"categories":[197,273,390],"tags":[],"class_list":["post-19955","post","type-post","status-publish","format-standard","hentry","category-accessibility","category-cutheme-announcements","category-keep"],"acf":{"cu_post_thumbnail":"news-2"},"_links":{"self":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/19955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/comments?post=19955"}],"version-history":[{"count":3,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/19955\/revisions"}],"predecessor-version":[{"id":21445,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/posts\/19955\/revisions\/21445"}],"wp:attachment":[{"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/media?parent=19955"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/categories?post=19955"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/carleton.ca\/webservices\/wp-json\/wp\/v2\/tags?post=19955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}