NHS Blocks

Beschreibung

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.

This plugin previously required Gutenberg 7.9.1 (as a standalone plugin) to be installed and active. This requirement
has now been removed and it uses the native Gutenberg that ships with WordPress 5.3 and higher. If you also have the
Gutenberg plugin installed we strongly encourage you to deactivate the Gutenberg plugin as it may cause future conflicts
with the nhsblocks plugin (at time of writing it doesn’t, but Gutenberg updates every fortnight and we don’t plan to do
fortnightly releases of nhsblocks)

Development / Contributing

Contributions to development of this work are welcome at our GitHub repository.

Screenshots

  • 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

Blöcke

Dieses Plugin unterstützt 18 Blöcke.

nhsblocks/panel1
NHS Blocks
nhsblocks/dashboardnav
Dashboard Navigation
nhsblocks/dodont
Do and Don
nhsblocks/nhsbutton
Button
nhsblocks/reveal1
Simple Reveal
nhsblocks/promo1
Promo Region
nhsblocks/quote1
Simple Quote
nhsblocks/card1
Card Region
nhsblocks/rowgroup
Grouped Items
nhsblocks/heroblock
Hero Block
nhsblocks/contentslist
Contents List
nhsblocks/contentslistitem
NHS Blocks
nhsblocks/reviewdate
NHS Blocks
nhsblocks/stripesblock
Stripes Block
nhsblocks/pagination
Pagination
nhsblocks/contentslistpage
Contents List within a page
nhsblocks/actionlink
Action Link
nhsblocks/backlink
Back Link

Installation

This section describes how to install the plugin and get it working.

  1. This plugin uses the core version of Gutenberg included in WordPress 5.2 and higher. If you also run the Gutenberg
    plugin, you may encounter issues.
  2. Upload the plugin files to the /wp-content/plugins/plugin-name directory, or install the plugin through the WordPress plugins screen directly.
  3. Activate the plugin through the ‚Plugins‘ screen in WordPress
  4. Navigate to edit or create any page or post.
  5. 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.

FAQ

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.

Rezensionen

23. April 2020
Kudos to Tony Blacker & the NHS leadership team for making this available for us all, and their long-term commitment to doing the necessary updates. There are a lot of user-friendly blocks here that you'll have trouble finding elsewhere.
Lies alle 2 Rezensionen

Mitwirkende & Entwickler

„NHS Blocks“ ist Open-Source-Software. Folgende Menschen haben an diesem Plugin mitgewirkt:

Mitwirkende

Übersetze „NHS Blocks“ in deine Sprache.

Interessiert an der Entwicklung?

Durchstöbere den Code, sieh dir das SVN Repository an oder abonniere das Entwicklungsprotokoll per RSS.

Änderungsprotokoll

1.1.6

  • Removed requirement for separate Gutenberg plugin – instead use core WP version of Gutenberg. If you currently have
    the Gutenberg plugin purely for the NHSBlocks plugin to work, we actively encourage you to remove the Gutenberg plugin
    from your deployment to improve stability and performance.
  • visually hidden messages modified on care cards so status is reflected to screen readers
  • removed php7.4 declaration types for backwards compatability
  • updated dependencies in composer
  • Ensured default values added to all text fields to make it easier to edit, improved UX
  • Added preview styling to block chooser so you can see what each block does before selecting it.
  • Modified logic on action link to make it more stable (and reduce incidence of „Resolve block“ notifications)

1.1.4

  • Removed a lot of excess styling in the css
  • Ensured compatible with Gutenberg 7.9.1
  • Tested fully on non NHS themes
  • Targeted styling in editor to only editor view and style preview panel.

1.1.3

Addition of multiple new blocks:
* Section Stripes – full width alternating white and grey stripes that can have inner blocks within. Great for full
width homepages and landing pages.
* Contents list – 2 options:
* Page contents – will autodetect all h2 tags on the page and show anchor links to them
* Other pages – you can manually add links to other pages (or external resources) in an easy to use list.
* Review Date – add the block and an area will be added to your page showing the date of when it was last reviewed (i.e
. now)
* Pagination – want a prev and next button. Add this block, and manually configure your previous and next links. Great
for process flows or user guides.
* Action link – want to suggest a user follows a link, but dont want a button. Use an action link
* Back link – let users step back a page. (This uses javascript -1, so if users land on the page from another site and
click this they will go back where they came from….)
Additions of style options to pre-existing blocks:
* Core table block can now be styled like nhsuk frontend, with fully responsive tables
* Images can now be amended to nhusk styling
* Addition of warning callout option to cards. Particularly useful for Covid-19 alerts
Thanks to @verytwisty for all the pull requests and support, 90% of this update is her work.
(Also some remedial work to ensure inner block compatability with Gutenberg 7.6 and some minor housekeeping with file
structures)

1.1.2

  • Added examples to show in block selector region for all blocks.
  • Amended Dashboard and Groups to be Gutenberg 7.5 compatible
  • Updated upstream NPM libraries – principle change being NHSUK Frontend library

1.1.1

  • Minor update for stable tag update.

1.1.0

  • Updated for Gutenberg 7.4 – you will need to update Gutenberg for this plugin to continue functioning
  • Dashboard block and grouped block changed from __experimentalTemplateOptions to __experimentalBlockVariationPicker
    • This is technical debt and will need revisiting when this feature moves out of experimental phase
  • Button default text added for better UX
  • Button link moved to right hand Inspector area for improved UX
  • Incorrect image name on dashboard block. appears to be a breaking change – it isnt! Any previously created
    dashboard, when edited will come up as invalid content due to this fix. You will need to click the three dots on the
    block editor and click „resolve“ to repair.
  • Corrected some funky and unusual css bugs

1.0.5

  • IE10/11 compatability with Hero Block
  • Additional css filters for buttons, panels and promos

1.0.4

  • Reworked js filters to position hero at head of page

1.0.3

  • Moved css and js from theme in to the blocks to enable standalone functionality
  • Added css to avoid conflicts with LearnDash (Conflicts triggered by Gutenberg plugin, but not in our gift)

1.0.1

  • 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

1.0

  • 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.