✔ Cover Block - Make full width if full-width view is set in the backend
Completed by Kyle S.
- Assigned to
-
Kyle S.
- Notes
-
If they set it full width as in the image below, the cover block should go the full-width of the screen. 100vw or whatever you want to use.
https://stlawrence.diocesanweb.org/styles/
This full-width stuff should be just for the cover block, nothing else.
Backend vs Frontend (has the gutters and shouldn't. Thanks.
.wp-block-cover.alignfull { width: 100vw; max-width: none; margin: 2.5rem -50vw; left: 50%; right: 50%; }No proof. Yes, all. It's a block that comes with WordPress so we need to make sure it works and is styled appropriately, just as you should be doing with any block that is on a website.
It'd be one thing if this just involved dropping an extra file into each theme (or the DPI Theme), but if we have to customize all of these different blocks for each of our sites, this will take several hours per site (especially if we don't have proofs for the same).
Also, do we have a standardized list or base to pull these blocks from? Otherwise the following may be a helpful start.
<!-- wp:paragraph --> <p>This is paragraph text.</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p><strong>Bold </strong>| <em>Italics </em>| <span style="text-decoration: underline;">Underline </span>| <a href="http://diocesan.com">Hyperlink</a></p> <!-- /wp:paragraph --> <!-- wp:heading {"level":1} --> <h1>Heading 1</h1> <!-- /wp:heading --> <!-- wp:heading --> <h2>Heading 2</h2> <!-- /wp:heading --> <!-- wp:heading {"level":3} --> <h3>Heading 3</h3> <!-- /wp:heading --> <!-- wp:heading {"level":4} --> <h4>Heading 4</h4> <!-- /wp:heading --> <!-- wp:heading {"level":5} --> <h5>Heading 5</h5> <!-- /wp:heading --> <!-- wp:heading {"level":6} --> <h6>Heading 6</h6> <!-- /wp:heading --> <!-- wp:heading --> <h2>Line Separators</h2> <!-- /wp:heading --> <!-- wp:paragraph {"align":"center"} --> <p style="text-align:center">Short Line Separator</p> <!-- /wp:paragraph --> <!-- wp:separator --> <hr class="wp-block-separator"/> <!-- /wp:separator --> <!-- wp:paragraph {"align":"center"} --> <p style="text-align:center">Long Line Separator</p> <!-- /wp:paragraph --> <!-- wp:separator {"className":"is-style-wide"} --> <hr class="wp-block-separator is-style-wide"/> <!-- /wp:separator --> <!-- wp:paragraph {"align":"center"} --> <p style="text-align:center">Dotted Separator</p> <!-- /wp:paragraph --> <!-- wp:separator {"className":"is-style-dots"} --> <hr class="wp-block-separator is-style-dots"/> <!-- /wp:separator --> <!-- wp:heading --> <h2>Lists</h2> <!-- /wp:heading --> <!-- wp:list --> <ul><li>This<ul><li>is<ul><li>a</li><li>bulleted<ul><li>list</li></ul></li></ul></li></ul></li></ul> <!-- /wp:list --> <!-- wp:list {"ordered":true} --> <ol><li>This<ol><li>is<ol><li>a</li><li>numbered<ol><li>list</li></ol></li></ol></li></ol></li></ol> <!-- /wp:list --> <!-- wp:heading --> <h2 id="quote">Quote Blocks</h2> <!-- /wp:heading --> <!-- wp:quote {"className":"is-style-large"} --> <blockquote class="wp-block-quote is-style-large"><p>This is a large quote block</p><cite>- Diocesan's Web Team, 2020</cite></blockquote> <!-- /wp:quote --> <!-- wp:quote {"className":"is-style-default"} --> <blockquote class="wp-block-quote is-style-default"><p>This is a default quote block</p><cite>- Diocesan's Web Team, 2020</cite></blockquote> <!-- /wp:quote --> <!-- wp:acf/styled-quote {"id":"block_5e0620325adfe","name":"acf/styled-quote","data":{},"align":"","mode":"preview"} /--> <!-- wp:pullquote {"className":"is-style-default"} --> <figure class="wp-block-pullquote is-style-default"><blockquote><p>This is a pull quote</p><cite>- Diocesan's Web Team, 2020</cite></blockquote></figure> <!-- /wp:pullquote --> <!-- wp:pullquote {"mainColor":"very-light-gray","textColor":"very-dark-gray","className":"has-very-light-gray-background-color is-style-solid-color"} --> <figure class="wp-block-pullquote has-very-light-gray-background-color is-style-solid-color"><blockquote class="has-text-color has-very-dark-gray-color"><p>This is a pull quote with solid color</p><cite>- Diocesan's Web Team, 2020</cite></blockquote></figure> <!-- /wp:pullquote --> <!-- wp:heading --> <h2>Audio File</h2> <!-- /wp:heading --> <!-- wp:audio {"id":3513} --> <figure class="wp-block-audio"><audio controls src="https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/yoshinori-tanaka-silent-night-key-in-b.mp3"></audio><figcaption>This is the caption to the Silent Night audio file from above.<br> <strong>Silent Night (key in B) by Yoshinori Tanaka / 田中 芳典 | https://soundcloud.com/yoshinori-tanaka-guitar<br>Music promoted by https://www.free-stock-music.com<br>Creative Commons Attribution 3.0 Unported License<br>https://creativecommons.org/licenses/by/3.0/deed.en_US</strong> </figcaption></figure> <!-- /wp:audio --> <!-- wp:heading --> <h2>Button</h2> <!-- /wp:heading --> <!-- wp:button --> <div class="wp-block-button"><a class="wp-block-button__link" href="diocesan.com">Button Text</a></div> <!-- /wp:button --> <!-- wp:heading --> <h2>Files</h2> <!-- /wp:heading --> <!-- wp:file {"id":235,"href":"https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/MQA-Role-of-the-Lector.pdf"} --> <div class="wp-block-file"><a href="https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/MQA-Role-of-the-Lector.pdf">File Test with Download Button</a><a href="https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/MQA-Role-of-the-Lector.pdf" class="wp-block-file__button" download>Download</a></div> <!-- /wp:file --> <!-- wp:file {"id":235,"href":"https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/MQA-Role-of-the-Lector.pdf","showDownloadButton":false} --> <div class="wp-block-file"><a href="https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/MQA-Role-of-the-Lector.pdf">File Test without Download Button</a></div> <!-- /wp:file --> <!-- wp:heading --> <h2 id="media-center">Media Center</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>(Block below)</p> <!-- /wp:paragraph --> <!-- wp:acf/media-center {"id":"block_5e0625f05ae02","name":"acf/media-center","data":{},"align":"","mode":"preview"} /--> <!-- wp:heading --> <h2 id="accordion">Accordion</h2> <!-- /wp:heading --> <!-- wp:acf/accordion {"id":"block_5e0622765adff","name":"acf/accordion","data":{"accordion_0_section_title":"Accordion 1","_accordion_0_section_title":"field_5d09361b097f9","accordion_0_section_content":"Accordion 1 content","_accordion_0_section_content":"field_5d0936be097fa","accordion_1_section_title":"Accordion 2","_accordion_1_section_title":"field_5d09361b097f9","accordion_1_section_content":"Accordion 2 content","_accordion_1_section_content":"field_5d0936be097fa","accordion":2,"_accordion":"field_5d0937569af32"},"align":"","mode":"preview"} /--> <!-- wp:heading --> <h2>Sidebar Images</h2> <!-- /wp:heading --> <!-- wp:acf/left-sidebar {"id":"block_5e061e775adf6","name":"acf/left-sidebar","data":{"sidebar":3425,"_sidebar":"field_5c9a7bad85038","column":"Left Sidebar Image","_column":"field_5c9a7c1285039"},"align":"","mode":"preview"} /--> <!-- wp:acf/right-sidebar {"id":"block_5e061e9c5adf8","name":"acf/right-sidebar","data":{"column":"Right Sidebar Image","_column":"field_5c9b7536601d9","sidebar":3425,"_sidebar":"field_5c9b7543601da"},"align":"","mode":"preview"} /--> <!-- wp:heading --> <h2 id="cover">Cover</h2> <!-- /wp:heading --> <!-- wp:cover {"url":"https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/iStock-172203786.jpg","id":3425,"dimRatio":40,"customOverlayColor":"#000000","focalPoint":{"x":0.535,"y":0.26865671641791045},"align":"full"} --> <div class="wp-block-cover alignfull has-background-dim-40 has-background-dim" style="background-image:url(https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/iStock-172203786.jpg);background-color:#000000;background-position:53.5% 26.865671641791046%"><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} --> <p style="text-align:center" class="has-large-font-size">This is a paragraph block over the "Cover" block.</p> <!-- /wp:paragraph --> <!-- wp:button {"align":"center"} --> <div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="#">This is crazy...</a></div> <!-- /wp:button --> <!-- wp:button {"align":"center"} --> <div class="wp-block-button aligncenter"><a class="wp-block-button__link" href="#">Crazy COOL</a></div> <!-- /wp:button --></div></div> <!-- /wp:cover --> <!-- wp:cover {"url":"https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/iStock-814812226-1.jpg","id":3404,"hasParallax":true,"align":"wide"} --> <div class="wp-block-cover alignwide has-background-dim has-parallax" style="background-image:url(https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/iStock-814812226-1.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:heading --> <h2>This is a heading. </h2> <!-- /wp:heading --> <!-- wp:paragraph {"align":"center"} --> <p style="text-align:center">This is paragraph text.</p> <!-- /wp:paragraph --></div></div> <!-- /wp:cover --> <!-- wp:cover {"url":"https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/Pexels-Videos-1918465-1.mp4","id":3560,"dimRatio":30,"backgroundType":"video"} --> <div class="wp-block-cover has-background-dim-30 has-background-dim"><video class="wp-block-cover__video-background" autoplay muted loop src="https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/Pexels-Videos-1918465-1.mp4"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} --> <p style="text-align:center" class="has-large-font-size">Video in background</p> <!-- /wp:paragraph --></div></div> <!-- /wp:cover --> <!-- wp:heading --> <h2 id="image-button">Image Buttons</h2> <!-- /wp:heading --> <!-- wp:acf/image-buttons {"id":"block_5e061eb15adf9","name":"acf/image-buttons","data":{"buttons_0_button_image":3481,"_buttons_0_button_image":"field_5cbdc4f17a769","buttons_0_button_link":{"title":"Image Button Full Width","url":"#","target":""},"_buttons_0_button_link":"field_5cbdc5107a76a","buttons":1,"_buttons":"field_5cbdc4957a768"},"align":"full","mode":"preview"} /--> <!-- wp:acf/image-buttons {"id":"block_5e061f4b5adfc","name":"acf/image-buttons","data":{"buttons_0_button_image":3481,"_buttons_0_button_image":"field_5cbdc4f17a769","buttons_0_button_link":{"title":"Image Button Normal Width","url":"#","target":""},"_buttons_0_button_link":"field_5cbdc5107a76a","buttons":1,"_buttons":"field_5cbdc4957a768"},"mode":"preview"} /--> <!-- wp:heading --> <h2 id="plinko">Plinko Block</h2> <!-- /wp:heading --> <!-- wp:acf/plinko {"id":"block_5e061fe15adfd","name":"acf/plinko","data":{"plinko_title":"Plinko Title","_plinko_title":"field_5d49bff2f3d86","plinko_text":"Plinko text","_plinko_text":"field_5d49c122f3d88","plinko_buttons_0_button":{"title":"Button","url":"#","target":""},"_plinko_buttons_0_button":"field_5d49c17ef3d8c","plinko_buttons":1,"_plinko_buttons":"field_5d49c173f3d8b","plinko_media_type":"0","_plinko_media_type":"field_5d49bfb6f3d85","plinko_image":3481,"_plinko_image":"field_5d49a4615e215"},"align":"","mode":"preview"} /--> <!-- wp:acf/plinko {"id":"block_5e1f2a85bb63f","name":"acf/plinko","data":{"plinko_title":"Plinko Title","_plinko_title":"field_5d49bff2f3d86","plinko_text":"Plinko text","_plinko_text":"field_5d49c122f3d88","plinko_buttons_0_button":{"title":"Button","url":"#","target":""},"_plinko_buttons_0_button":"field_5d49c17ef3d8c","plinko_buttons":1,"_plinko_buttons":"field_5d49c173f3d8b","plinko_media_type":"1","_plinko_media_type":"field_5d49bfb6f3d85","plinko_video":"https://vimeo.com/219570148","_plinko_video":"field_5d49c01bf3d87"},"align":"","mode":"preview"} /--> <!-- wp:heading --> <h2 id="image-banner">Image Banner</h2> <!-- /wp:heading --> <!-- wp:acf/image-banner {"id":"block_5e061bb85adf1","name":"acf/image-banner","data":{"image_banner_background":3425,"_image_banner_background":"field_5cb7396dc57ad","image_banner_title":"Image Banner Title with Image","_image_banner_title":"field_5cb739a6c57ae","image_banner_content":"Image Banner Content","_image_banner_content":"field_5cb739bfc57af","image_banner_buttons_0_button_title":"Button","_image_banner_buttons_0_button_title":"field_5cb77576b5a34","image_banner_buttons_0_button_link":{"title":"Button Text","url":"#","target":""},"_image_banner_buttons_0_button_link":"field_5cb73a73c57b1","image_banner_buttons":1,"_image_banner_buttons":"field_5cb739c7c57b0"},"align":"","mode":"preview"} /--> <!-- wp:acf/image-banner {"id":"block_5e061bfd5adf5","name":"acf/image-banner","data":{"image_banner_background":3425,"_image_banner_background":"field_5cb7396dc57ad","image_banner_title":"Image Banner Title with Image Full Width","_image_banner_title":"field_5cb739a6c57ae","image_banner_content":"Image Banner Content","_image_banner_content":"field_5cb739bfc57af","image_banner_buttons_0_button_title":"Button","_image_banner_buttons_0_button_title":"field_5cb77576b5a34","image_banner_buttons_0_button_link":{"title":"Button Text","url":"#","target":""},"_image_banner_buttons_0_button_link":"field_5cb73a73c57b1","image_banner_buttons":1,"_image_banner_buttons":"field_5cb739c7c57b0"},"align":"full","mode":"preview"} /--> <!-- wp:acf/image-banner {"id":"block_5e061bdf5adf3","name":"acf/image-banner","data":{"image_banner_background":"","_image_banner_background":"field_5cb7396dc57ad","image_banner_title":"Image Banner Title without Image","_image_banner_title":"field_5cb739a6c57ae","image_banner_content":"Image Banner Content","_image_banner_content":"field_5cb739bfc57af","image_banner_buttons_0_button_title":"Button","_image_banner_buttons_0_button_title":"field_5cb77576b5a34","image_banner_buttons_0_button_link":{"title":"Button Text","url":"#","target":""},"_image_banner_buttons_0_button_link":"field_5cb73a73c57b1","image_banner_buttons":1,"_image_banner_buttons":"field_5cb739c7c57b0"},"align":"","mode":"preview"} /--> <!-- wp:acf/image-banner {"id":"block_5e061bf25adf4","name":"acf/image-banner","data":{"image_banner_background":"","_image_banner_background":"field_5cb7396dc57ad","image_banner_title":"Image Banner Title without Image Full Width","_image_banner_title":"field_5cb739a6c57ae","image_banner_content":"Image Banner Content","_image_banner_content":"field_5cb739bfc57af","image_banner_buttons_0_button_title":"Button","_image_banner_buttons_0_button_title":"field_5cb77576b5a34","image_banner_buttons_0_button_link":{"title":"Button Text","url":"#","target":""},"_image_banner_buttons_0_button_link":"field_5cb73a73c57b1","image_banner_buttons":1,"_image_banner_buttons":"field_5cb739c7c57b0"},"align":"full","mode":"preview"} /--> <!-- wp:heading --> <h2>Media Blocks</h2> <!-- /wp:heading --> <!-- wp:media-text {"mediaId":3481,"mediaType":"image","mediaWidth":48,"isStackedOnMobile":true} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile" style="grid-template-columns:48% auto"><figure class="wp-block-media-text__media"><img src="https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2019/12/alex-perez-AIfbUyzhKz0-unsplash-e1577393209337-1024x787.jpg" alt="" class="wp-image-3481"/></figure><div class="wp-block-media-text__content"><!-- wp:heading --> <h2>Media & Text Block</h2> <!-- /wp:heading --> <!-- wp:paragraph --> <p>That's what this is. </p> <!-- /wp:paragraph --> <!-- wp:list --> <ul><li>Interst</li><li>Hobbies</li><li>Time</li><li>Is this for you?</li><li>Purpose</li><li>Responsibilities</li><li>Helpful Things</li><li>This</li><li>Is</li><li>Another</li><li>Item</li><li>How </li><li>Many</li><li>Can</li><li>We</li><li>Do</li></ul> <!-- /wp:list --> <!-- wp:button {"align":"left"} --> <div class="wp-block-button alignleft"><a class="wp-block-button__link" href="#">Button Text</a></div> <!-- /wp:button --> <!-- wp:button {"align":"left"} --> <div class="wp-block-button alignleft"><a class="wp-block-button__link" href="#">Registration Form</a></div> <!-- /wp:button --></div></div> <!-- /wp:media-text --> <!-- wp:media-text {"mediaPosition":"right","mediaId":3621,"mediaType":"image","mediaWidth":30,"isStackedOnMobile":true} --> <div class="wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile" style="grid-template-columns:auto 30%"><figure class="wp-block-media-text__media"><img src="https://jp2-mqa.diocesanweb.org/jp2/wp-content/uploads/sites/4/2020/01/iStock-649070858-1024x683.jpg" alt="" class="wp-image-3621"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","fontSize":"large"} --> <p class="has-large-font-size">Christifideles</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p> <!-- /wp:paragraph --> <!-- wp:button {"customBackgroundColor":"#022e54"} --> <div class="wp-block-button"><a class="wp-block-button__link has-background" href="#" style="background-color:#022e54">LEARN MORE</a></div> <!-- /wp:button --></div></div> <!-- /wp:media-text --> <!-- wp:heading --> <h2>Gravity Forms</h2> <!-- /wp:heading --> <!-- wp:gravityforms/form {"formId":"1"} /--> <!-- wp:heading --> <h2>Post Widgets</h2> <!-- /wp:heading --> <!-- wp:categories {"displayAsDropdown":true,"showPostCounts":true} /--> <!-- wp:latest-posts {"postLayout":"grid"} /--> <!-- wp:latest-posts /--> <!-- wp:search {"placeholder":"Editable placeholder","buttonText":"Editable Search Button"} /--> <!-- wp:search {"placeholder":"What are you looking for?","buttonText":"Let's Find It!"} /--> <!-- wp:heading --> <h2>Page Break</h2> <!-- /wp:heading --> <!-- wp:nextpage --> <!--nextpage--> <!-- /wp:nextpage --> <!-- wp:paragraph --> <p>This is the information on the second page. </p> <!-- /wp:paragraph -->For the most part, only color palettes and buttons (button & files) need to be styled (other than text of course). But if they do not request or have a design for a Diocesan-built block, it shouldn't be on the site.
We'll discuss this next Monday.