{"id":1534,"date":"2022-09-21T12:00:59","date_gmt":"2022-09-21T16:00:59","guid":{"rendered":"http:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/?page_id=1534"},"modified":"2022-09-21T14:00:51","modified_gmt":"2022-09-21T18:00:51","slug":"wp-core-cover-block","status":"publish","type":"page","link":"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/core-blocks\/wp-core-cover-block\/","title":{"rendered":"WP Core: Cover Block"},"content":{"rendered":"\n<p>Displays text on top of an image, with options for fixing the background and choosing a point where the image will try to center to, such as a face, when the image needs to crop on mobile.<\/p>\n\n\n\n<p>In the future, this may be a promising starting point for replacing BU Banners because of the flexibility of changing the &#8220;focal point&#8221; so that faces don&#8217;t get cropped at mobile sizes.<\/p>\n\n\n\n<h2>Interface Options<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"284\" height=\"776\" src=\"\/gutenberg\/files\/2022\/09\/Screen-Shot-2022-09-21-at-1.58.22-PM.png\" alt=\"\" class=\"wp-image-1554\" srcset=\"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/files\/2022\/09\/Screen-Shot-2022-09-21-at-1.58.22-PM.png 284w, https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/files\/2022\/09\/Screen-Shot-2022-09-21-at-1.58.22-PM-233x636.png 233w\" sizes=\"(max-width: 284px) 100vw, 284px\" \/><\/figure>\n\n\n\n<h2>Examples<\/h2>\n\n\n\n<div class=\"wp-block-cover has-background-dim\" style=\"background-image:url(\/gutenberg\/files\/2019\/12\/willian-justen-de-vasconcellos-lzOzsGmAg3s-unsplash.jpg)\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-large-font-size\">Cover Text<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover has-background-dim\" style=\"background-image:url(\/gutenberg\/files\/2019\/12\/willian-justen-de-vasconcellos-lzOzsGmAg3s-unsplash.jpg);background-position:100% 0%\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-large-font-size\">Cover Block with Upper Right Focal Point<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover has-background-dim\" style=\"background-image:url(\/gutenberg\/files\/2019\/12\/willian-justen-de-vasconcellos-lzOzsGmAg3s-unsplash.jpg);background-position:0% 50%;min-height:900px\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-large-font-size\">Cover Block with Minimum Height of 900px and Left Center Focal Point<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover has-background-dim has-parallax\" style=\"background-image:url(\/gutenberg\/files\/2019\/12\/willian-justen-de-vasconcellos-lzOzsGmAg3s-unsplash.jpg)\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-large-font-size\">Cover Block with Fixed Background<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover has-vivid-red-background-color has-background-dim\" style=\"background-image:url(\/gutenberg\/files\/2019\/12\/willian-justen-de-vasconcellos-lzOzsGmAg3s-unsplash.jpg)\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-large-font-size\">Cover Block with Color Settings Background &#8211; Red<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover has-background-dim-80 has-vivid-red-background-color has-background-dim\" style=\"background-image:url(\/gutenberg\/files\/2019\/12\/willian-justen-de-vasconcellos-lzOzsGmAg3s-unsplash.jpg)\"><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-large-font-size\">Cover Block with Color Settings Background &#8211; Red and 80% Opacity<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover has-background-dim-30 has-background-dim has-background-gradient\" style=\"background-image:url(\/gutenberg\/files\/2019\/12\/willian-justen-de-vasconcellos-lzOzsGmAg3s-unsplash.jpg)\"><span aria-hidden=\"true\" class=\"wp-block-cover__gradient-background has-cool-to-warm-spectrum-gradient-background\"><\/span><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-text-align-center has-large-font-size\">Cover Block with Color Settings Background &#8211; Gradient and 30% Opacity<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-cover has-background-dim-30 has-background-dim has-background-gradient\" style=\"background-image:url(\/gutenberg\/files\/2019\/12\/willian-justen-de-vasconcellos-lzOzsGmAg3s-unsplash.jpg)\"><span aria-hidden=\"true\" class=\"wp-block-cover__gradient-background has-cool-to-warm-spectrum-gradient-background\"><\/span><div class=\"wp-block-cover__inner-container\">\n<p class=\"has-drop-cap has-text-align-left has-large-font-size\">Paragraph Block is used as text in this block and supports all settings, including text size, alignment, and drop cap<\/p>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Displays text on top of an image, with options for fixing the background and choosing a point where the image will try to center to, such as a face, when the image needs to crop on mobile. In the future, this may be a promising starting point for replacing BU Banners because of the flexibility [&hellip;]<\/p>\n","protected":false},"author":3357,"featured_media":0,"parent":1545,"menu_order":9,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/1534"}],"collection":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/users\/3357"}],"replies":[{"embeddable":true,"href":"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/comments?post=1534"}],"version-history":[{"count":2,"href":"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/1534\/revisions"}],"predecessor-version":[{"id":1555,"href":"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/1534\/revisions\/1555"}],"up":[{"embeddable":true,"href":"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/1545"}],"wp:attachment":[{"href":"https:\/\/id-demos.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/media?parent=1534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}