[WIP] Fix block spacing

app/assets/stylesheets/views/_landing_page.scss

@@ -26,16 +26,17 @@
   }
 }
 
-.govuk-block {
+.govuk-block--spaced {
   margin-bottom: govuk-spacing(9);
 }
 
 .govuk-block--background {
+  margin-bottom: govuk-spacing(9);
   background: govuk-colour("light-grey");
-  padding: govuk-spacing(8) 0;
+  padding-top: govuk-spacing(6);
+  padding-bottom: 0.05px; // stop margin escaping
 
   &:has(+ .govuk-block--background) {
-    padding-bottom: 0.05px; // stop margin escaping
     margin-bottom: 0;
   }
 
@@ -44,16 +45,8 @@
   }
 }
 
-.govuk-block__share_links {
-  margin-bottom: 0;
-}
-
-.govuk-block__heading {
-  margin-bottom: govuk-spacing(4);
-}
-
 .grid-column-one-third-offset {
   @include govuk-media-query($from: "desktop") {
     min-height: 1px;
   }
-}
+}

app/assets/stylesheets/views/_landing_page/columns_layout.scss

@@ -3,6 +3,7 @@
 .app-b-columns-layout {
   display: grid;
   grid-gap: govuk-spacing(6);
+  margin-bottom: govuk-spacing(8);
 
   @include govuk-media-query($from: desktop) {
     @for $i from 2 through 3 {

app/assets/stylesheets/views/_landing_page/govspeak.scss

@@ -0,0 +1,9 @@
+@import "govuk_publishing_components/individual_component_support";
+
+// .govuk-block__govspeak {
+//   margin-bottom: govuk-spacing(9);
+
+//   &:has(+ .govuk-block__govspeak) {
+//     margin-bottom: 0;
+//   }
+// }

app/assets/stylesheets/views/_landing_page/main-navigation.scss

@@ -1,9 +1,5 @@
 @import "govuk_publishing_components/individual_component_support";
 
-.govuk-block__main_navigation {
-  margin-bottom: 0;
-}
-
 .app-b-main-nav {
   border-bottom: 1px solid $govuk-border-colour;
   @include govuk-font(19);

app/views/landing_page/blocks/_document_list.html.erb

@@ -1,15 +1,17 @@
 <% heading = block.heading || "Latest Updates" %>
 
 <% if block.items.any? %>
-  <%= render "govuk_publishing_components/components/heading", {
-    text: heading,
-    padding: true,
-    border_top: 5,
-    margin_bottom: 3
-  } %>
+  <div class="govuk-block--spaced">
+    <%= render "govuk_publishing_components/components/heading", {
+      text: heading,
+      padding: true,
+      border_top: 5,
+      margin_bottom: 3
+    } %>
 
-  <%= render "govuk_publishing_components/components/document_list", {
-    margin_bottom: 0,
-    items: block.items,
-  } %>
+    <%= render "govuk_publishing_components/components/document_list", {
+      margin_bottom: 0,
+      items: block.items,
+    } %>
+  </div>
 <% end %>

app/views/landing_page/blocks/_featured.html.erb

@@ -3,8 +3,7 @@
   featured_child_content_classes = "featured_child"
   block.image ? featured_child_content_classes << " featured__child--content-with-image" : featured_child_content_classes << " featured__child--content"
 %>
-
-<div class="featured">
+<div class="featured govuk-block--spaced">
   <%= tag.div class: featured_child_content_classes do %>
     <% block.featured_content.each do |subblock| %>
       <%= render_block(subblock) %>

app/views/landing_page/blocks/_govspeak.html.erb

@@ -1,10 +1,13 @@
 <%
+  add_view_stylesheet("landing_page/govspeak")
   inverse = options[:inverse] || false
-  margin_bottom = options[:margin_bottom] || 0
+  margin_bottom = options[:margin_bottom] || 9
 %>
-<%= render "govuk_publishing_components/components/govspeak", {
-  inverse: inverse,
-  margin_bottom:,
-} do %>
-  <%= block.data["content"].html_safe %>
-<% end %>
+<div class="govuk-block__govspeak">
+  <%= render "govuk_publishing_components/components/govspeak", {
+    inverse: inverse,
+    margin_bottom:,
+  } do %>
+    <%= block.data["content"].html_safe %>
+  <% end %>
+</div>

app/views/landing_page/blocks/_hero.html.erb

@@ -2,7 +2,7 @@
 <%
   add_view_stylesheet("landing_page/hero")
 
-  hero_classes = %W[app-b-hero app-b-hero--#{block.theme}]
+  hero_classes = %W[govuk-block--spaced app-b-hero app-b-hero--#{block.theme}]
 
   grid_class = "govuk-grid-column-two-thirds-from-desktop"
   grid_class = "govuk-grid-column-one-third-from-desktop" if block.theme == "middle_left"

app/views/landing_page/blocks/_statistics.html.erb

@@ -1,23 +1,25 @@
 <%
   add_gem_component_stylesheet("chart")
 
-  margin_bottom = options[:margin_bottom] || 8
+  margin_bottom = options[:margin_bottom] || 0
   height = options[:height] || 400
 %>
-<%= render "govuk_publishing_components/components/chart", {
-  chart_heading: block.data["title"],
-  hide_heading: block.data["hide_heading"],
-  h_axis_title: block.data["x_axis_label"],
-  v_axis_title: block.data["y_axis_label"],
-  hide_legend: block.data["hide_legend"],
-  keys: block.x_axis_keys,
-  rows: block.rows,
-  link: block.attachment&.url || block.data["data_source_link"],
-  margin_bottom: margin_bottom,
-  minimal: block.data["minimal"],
-  height: height,
-  table_direction: "vertical",
-  point_size: block.data["point_size"],
-  h_axis_format: block.data["x_axis_format"],
-  v_axis_format: block.data["y_axis_format"],
-} %>
+<div class="govuk-block--spaced">
+  <%= render "govuk_publishing_components/components/chart", {
+    chart_heading: block.data["title"],
+    hide_heading: block.data["hide_heading"],
+    h_axis_title: block.data["x_axis_label"],
+    v_axis_title: block.data["y_axis_label"],
+    hide_legend: block.data["hide_legend"],
+    keys: block.x_axis_keys,
+    rows: block.rows,
+    link: block.attachment&.url || block.data["data_source_link"],
+    margin_bottom: margin_bottom,
+    minimal: block.data["minimal"],
+    height: height,
+    table_direction: "vertical",
+    point_size: block.data["point_size"],
+    h_axis_format: block.data["x_axis_format"],
+    v_axis_format: block.data["y_axis_format"],
+  } %>
+</div>

app/views/landing_page/show.html.erb

@@ -39,7 +39,7 @@
 
 <main class="landing-page" id="content">
   <% @content_item.blocks.each do |block| %>
-    <%= tag.div class: ["govuk-block govuk-block__#{block.type}", ("govuk-block--background" if block.full_width_background?)] do %>
+    <%= tag.div class: ["govuk-block", ("govuk-block--background" if block.full_width_background?)] do %>
       <% if block.full_width? %>
         <%= render_block(block) %>
       <% else %>

config/initializers/dartsass.rb

@@ -20,6 +20,7 @@
   "views/_landing_page/box.scss" => "views/_landing_page/box.css",
   "views/_landing_page/card.scss" => "views/_landing_page/card.css",
   "views/_landing_page/columns_layout.scss" => "views/_landing_page/columns_layout.css",
+  "views/_landing_page/govspeak.scss" => "views/_landing_page/govspeak.css",
   "views/_landing_page/hero.scss" => "views/_landing_page/hero.css",
   "views/_landing_page/featured.scss" => "views/_landing_page/featured.css",
   "views/_landing_page/main-navigation.scss" => "views/_landing_page/main-navigation.css",

lib/data/landing_page_content_items/homepage.yaml

@@ -87,6 +87,73 @@ blocks:
       - type: govspeak
         content: |
           <p><a href="/landing-page/tasks" class="govuk-!-font-weight-bold">Find out more about our tasks</a></p>
+- type: two_column_layout
+  theme: two_thirds_right
+  blocks:
+  - type: govspeak
+    content: <p>This should be a two thirds width column occupying the right hand side of the page.</p>
+- type: two_column_layout
+  theme: two_thirds_right
+  blocks:
+  - type: blocks_container
+    blocks:
+    - type: press_notices
+      taxon_base_path: /government/safer-streets
+      items:
+      - text: An example link
+        path: https://www.gov.uk
+        document_type: Press release
+        public_updated_at: "2016-06-27 10:29:44 +0000"
+      - text: Another example link
+        path: https://www.gov.uk
+        document_type: News article
+        public_updated_at: "2021-01-16 11:34:12 +0000"
+      - text: A third example link
+        path: https://www.gov.uk
+        document_type: Consultation
+        public_updated_at: "2024-02-01 09:00:11 +0000"
+    - type: heading
+      content: Porem ipsum dolor
+    - type: govspeak
+      content: |
+        <p>Korem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis
+        molestie, dictum esta, mattis tellus. Sed dignissim, metus nec fringilla
+        accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
+        Maecenas eget.</p>
+    - type: govspeak
+      content: |
+        <p>Another govspeak block! Korem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis
+        molestie, dictum esta, mattis tellus. Sed dignissim, metus nec fringilla
+        accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
+        Maecenas eget.</p>
+- type: two_column_layout
+  theme: two_thirds_one_third
+  blocks:
+  - type: blocks_container
+    blocks:
+    - type: heading
+      content: Porem ipsum dolor
+    - type: govspeak
+      content: |
+        <p>Korem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis
+        molestie, dictum esta, mattis tellus. Sed dignissim, metus nec fringilla
+        accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
+        Maecenas eget.</p>
+    - type: press_notices
+      taxon_base_path: /government/safer-streets
+      items:
+      - text: An example link
+        path: https://www.gov.uk
+        document_type: Press release
+        public_updated_at: "2016-06-27 10:29:44 +0000"
+      - text: Another example link
+        path: https://www.gov.uk
+        document_type: News article
+        public_updated_at: "2021-01-16 11:34:12 +0000"
+      - text: A third example link
+        path: https://www.gov.uk
+        document_type: Consultation
+        public_updated_at: "2024-02-01 09:00:11 +0000"
 - type: heading
   content: Porem ipsum dolor
   full_width_background: true