Skip to main content

Upgrading from v2 to v3

v3.0.0 contained a number of breaking changes.

Side navigation layout

The side-navigation layout was renamed sub-navigation, so use this name wherever you call this layout. For example, in a document’s front matter:

- layout: side-navigation
+ layout: sub-navigation
  title: My post

Open Graph images

Plugin and front matter option names were updated to match names introduced in govuk-frontend v4.3.0.

Setting a default Open Graph image

Within plugin options, ogImage was renamed to opengraphImageUrl. A complete URL is also required for this value.

Example:

  eleventyConfig.addPlugin(govukEleventyPlugin, {
-   ogImage: '/assets/opengraph-image.png',
+   opengraphImageUrl: 'https://example.org/assets/opengraph-image.png',
  })

Using a post image as Open Graph image

Within front matter options, image.ogImage was renamed image.opengraphImage. For example:

  image:
    src: "/assets/post-image.png"
    alt: "Post image"
-   ogImage: true
+   opengraphImage: true

Adding an Open Graph image to a document

Within front matter options, ogImage was renamed opengraphImage. For example:

- ogImage:
+ opengraphImage:
    src: "/assets/another-opengraph-image.png"
    alt: "Another Open Graph image"

Plugin options were updated to better align with the changes to the footer component introduced in govuk-frontend v4.3.0.

Setting a custom content licence

You can change the content licence in the footer using the footer.contentLicence option. This replaces footer.licence.

footer.contentLicence takes either a text or html value, and no longer parses Markdown. Unlike the component in the Design System, using this option will prevent the OGL logo from appearing to the left of the content licence.

Example:

  eleventyConfig.addPlugin(govukEleventyPlugin, {
    footer: {
-     licence: 'Licensed under the MIT Licence'
+     contentLicence: {
+       text: 'Licensed under the MIT Licence'
+     }
    }
  })

footer.copyright takes either a text or html value, and no longer parses Markdown. Unlike the component in the Design System, using this option prevents the Royal Coat of Arms from appearing above the copyright statement.

Example:

  eleventyConfig.addPlugin(govukEleventyPlugin, {
    footer: {
-     copyright: '© 2022 My Organistion'
+     copyright: {
+       text: '© 2022 My Organistion'
+     }
    }
  })

Article component

If you were overriding a layout and using the appArticle component, this was removed and replaced with separate appDocumentHeader and appDocumentFooter components.