Allow heading blocks to accept an id for an anchor link

alphagov · Nov 29, 2024 · 3672992 · 3672992
1 parent a044a3d
commit 3672992
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 0 deletions.
diff --git a/app/views/landing_page/blocks/_heading.html.erb b/app/views/landing_page/blocks/_heading.html.erb
@@ -9,6 +9,7 @@
 %>
 <%= render "govuk_publishing_components/components/heading", {
   text: govuk_styled_link(text, path:, inverse:),
+  id: block.data["id"],
   font_size: font_size,
   heading_level: heading_level,
   margin_bottom: margin_bottom,

diff --git a/docs/building_blocks_for_flexible_content.md b/docs/building_blocks_for_flexible_content.md
@@ -119,8 +119,11 @@ When added through Whitehall content can either be written in HTML or govspeak m
 
 A wrapper around the [Heading component](https://components.publishing.service.gov.uk/component-guide/heading). This block uses `content` where the component uses `text` for the title text key. This is so that headings can appear in search (only values inside a `content` key will be indexed when being published from Whitehall - see [Indexing block content in search](#indexing-block-content-in-search))
 
+If an `id` is added, the heading can be referenced in an anchor link.
+
 ```yaml
 - type: heading
+  id: heading-id
   content: Porem ipsum dolor
 ```
 

diff --git a/lib/data/landing_page_content_items/exercise_more.yaml b/lib/data/landing_page_content_items/exercise_more.yaml
@@ -43,6 +43,12 @@ navigation_groups:
       href: "/landing-page/learn-something-new"
     - text: Be thankful
       href: "/landing-page/be-thankful"
+  - heading: Exercise more
+    links:
+    - text: Anchor link one
+      href: "/landing-page/exercise-more#anchor-one"
+    - text:  Anchor link two
+      href: "/landing-page/exercise-more#anchor-two"
 - id: Sidebar
   links:
   - text: Be kinder
@@ -146,6 +152,7 @@ blocks:
         accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus.
         Maecenas eget.</p>
     - type: heading
+      id: anchor-one
       content: Porem ipsum dolor
     - type: govspeak
       content: |
@@ -156,6 +163,7 @@ blocks:
         Maecenas eget.</p>
     - type: heading
       content: Porem ipsum dolor
+      id: anchor-two
     - type: document_list
       taxon_base_path: /government/government-efficiency-transparency-and-accountability
       items: