NHS styled blocks for WordPress using the Gutenberg editor, based on the excellent work from the NHSUK Frontend Library. These blocks mean your WordPress site can offer the latest care cards, site promos and info panels to your users, and that all of this content will be styled to match the NHS branding guidelines.
This plugin is designed principally for use by NHS organisations, but can be used by anybody.
Development / Contributing
Contributions to development of this work are welcome at our GitHub repository.
This section describes how to install the plugin and get it working.
- This plugin requires that the Gutenberg plugin (running as a plugin) is already installed and active on your site to get the latest developments and techniques available.
- Upload the plugin files to the
/wp-content/plugins/plugin-name directory, or install the plugin through the WordPress plugins screen directly.
- Activate the plugin through the ‘Plugins’ screen in WordPress
- Navigate to edit or create any page or post.
- When you go to add a new block to your content, you will see a new section titled “NHS Frontend”. In here are all of the new blocks this plugin provides. Experiment – almost all of the blocks have style variations available.
Is this plugin restricted to only NHS Organisations
This plugin has been built specifically for use in the NHS, but it is open source code and you are free to use it on any site.
- Added Base language (English) and ensured full internationalisation. Translations welcome 🙂
- Registered all blocks so they show correctly on plugin page
- Improved Screenshot library for clearer understanding of plugin functionality from within WordPress.org listing / wp-admin search function
- First stable public release of the plugin.
- Included modules:
- Dashboard links – designed for your home page or a section home. You can add graphical sections with text overlays linking to your inner pages.
- Do / Dont Lists – simple panels with lists of items with either a tick or a cross next to them.
- Button – NHS styled buttons, available as primary (green), secondary (blue) or reverse (white)
- Reveal – expandable areas of the screen. Available either as standard reveal (down arrow) or expander (plus icon)
- Panels – Text areas with titles, text and buttons for call to action. Available as standard white panel, grey panel or white panel with coloured header.
- Promo – Linked boxes with text and optional images. Available in standard or smaller text variants.
- Testimonial – quotes or testimonials can be included with this block. Available as standard (blue text with blue left hand border) or inverted (white text with blue background and white left hand border)
- Cards – Information cards. Coloured headers with an arrow pointing to text content. Available as standard care card, warnings (red header) or alerts (red header, black body)
- Grouped Items – pre configured layouts of elements, with eiter testimonials, panels or promos inside each field.
- Hero Banner – a full screen width hero image, with optional text overlay box including title and tagline. Ideal for graphically anchoring your website sections.
This plugin adds a new type of block to your WordPress - titled NHS Frontend - with 10 new blocks based on the NHS Digital Frontend Library
Dashboard Layout - a graphical nav panel for users to jump to sections of your site
Do / Dont lists - Simple lists in a display card with ticks and crosses to denote actions they should or should not take. Can also be used for status updates, projects etc
Buttons - Restyling of buttons to match NHS Digital layouts
Reveal Elements - Either simple arrow based expandable sections, or icon based with plus/minus icons
Panels - Text blocks with title sections to separate your content out cleanly
Promo Blocks - Clean blocks which are completely linked to inner content / external sources with title, text and optional images
Testimonial / Quote - Simple display device for highlighting user feedback, personal quotes or other text you would like to highlight
Grouped blocks - pre-defined layouts for displaying your content in more eye catching ways
Hero - a full screen width block, with optional single colour or image background and optional block of text to anchor the page and set clear purpose