NHSLeadership/nhsl-wp-blocks

Nightingale Styled Blocks for Gutenburg editor

NHS Blocks for Gutenburg

Alpha release - this code is still in active development

This is a WordPress plugin to extend the NHS Frontend library in to the Gutenburg editor. It adds blocks to the editor which then display in correct markup for the NHS template to render.

Dependancies:

• This suite of blocks requires the NHS Front end library to be loaded. Preferably, through the Nightingale 2.0 WordPress theme

• This suite of blocks requires an active ACF Pro install. Active means the license field needs to be completed. If not, the editor will not have any way of connecting to the code. It wont work. Don't use ACF standard, it wont work. Seriously, it needs the Pro version.

Included blocks:

• Information card

  • Standard non urgent care card - blue top
  • Highlight urgent care card - red top
  • Immediate ( immediate care card - red top, dark grey panel):

• Do and Dont List Able to make a list of either do with tick, or dont with cross.

• Testimonials / Quotes - expanded to include inverted box option

• Reveal

• Call Out Box

  • Promo with no description
  • Promo with image

• Call Out Box Group

  • as individual call out box, but grouped with ability to add multiple boxes in a layout of your choice.

• Panel Element

  • Panel with grey background
  • Panel with label
  • Added action button

• Panel Element Group

• Button

  • Action button - Green
  • Secondary Button - Grey
  • Reverse Button - White

• Hero

  • Hero with only image
  • Hero with only text
  • Hero with both image and text

Installation

• -Ensure you first have ACF Pro installed and activated.
• It also makes sense to have the NHS Nightingale 2.0 Theme installed and active
• Add this code to your plugins folder - you may need to rename the folder to nhsl-blocks. So all code will now be in wp-content/plugins/nhsl-blocks
• Activate the plugin.
• Navigate to your admin panel, you will see Custom Fields in the left hand side. Click into this, then Field Groups. You will see a list of groups. Under each one will be a link saying Sync - click this for each group
• Edit a page or post. If you click to add a block, you will see a new list of blocks available at the bottom - NHS Block Elements. Click any of these and fill in the fields.
• When editing a page, at the bottom of the edit view is a new section "Hero Banner". Fill in these fields and upload an image on pages you wish to have a hero banner showing. The Hero Banner will not show without code in your theme. Nightingale 2.0 already includes this code

Progress

• Add core components
• Add flexibility to each component to scale it out
• Add Hero to Page edit screen
• Reveal element switcher to also use Expander
• Auto-include this repository with theme
• Build navigation alternative to tabs (tabs being bad for UX as researched by GDS)
• Check information cards settings, they dont always seem to load correctly on install.

2019 NHS Leadership Academy