Bloques NHS - KolMitE

Bloques NHS

Bloques NHS

diciembre 22, 2020 General 0

Descripción

Bloques de estilo NHS para WordPress utilizando el editor Gutenberg, basado en el excelente trabajo de la biblioteca NHSUK Frontend. Estos bloques significan que su sitio de WordPress puede ofrecer las últimas tarjetas de atención, promociones del sitio y paneles de información a sus usuarios, y que todo este contenido se diseñará para que coincida con las pautas de marca del NHS.

Este complemento está diseñado principalmente para ser utilizado por organizaciones del NHS, pero puede ser utilizado por cualquier persona.

Este complemento anteriormente requería que Gutenberg 7.9.1 (como un complemento independiente) estuviera instalado y activo. Este requisito
ahora se ha eliminado y utiliza el Gutenberg nativo que se envía con WordPress 5.3 y superior. Si también tienes el
Complemento de Gutenberg instalado, le recomendamos encarecidamente que desactive el complemento de Gutenberg, ya que puede causar conflictos en el futuro.
con el complemento nhsblocks (en el momento de redactar este artículo no lo hace, pero Gutenberg se actualiza cada quince días y no planeamos hacerlo
lanzamientos quincenales de nhsblocks)

Desarrollo / Contribución

Las contribuciones al desarrollo de este trabajo son bienvenidas en nuestro repositorio de GitHub.

Capturas de pantalla

  • Este complemento agrega un nuevo tipo de bloque a su WordPress, titulado NHS Frontend, con 10 nuevos bloques basados ​​en la biblioteca NHS Digital Frontend.
  • Diseño del tablero: un panel de navegación gráfico para que los usuarios salten a secciones de su sitio.
  • Listas de hacer / no hacer: listas simples en una tarjeta de visualización con marcas y cruces para indicar las acciones que deben o no deben tomar. También se puede utilizar para actualizaciones de estado, proyectos, etc.
  • Botones: cambio de estilo de los botones para que coincidan con los diseños digitales de NHS
  • Revelar elementos: ya sea secciones expandibles basadas en flechas simples, o basadas en íconos con íconos más / menos
  • Paneles: bloques de texto con secciones de título para separar su contenido de forma limpia
  • Bloques de promoción: bloques limpios que están completamente vinculados al contenido interno / fuentes externas con título, texto e imágenes opcionales
  • Testimonio / Cita: dispositivo de visualización simple para resaltar los comentarios de los usuarios, citas personales u otro texto que le gustaría resaltar
  • Bloques agrupados: diseños predefinidos para mostrar su contenido de formas más llamativas
  • Hero: un bloque de ancho de pantalla completa, con un solo color opcional o un fondo de imagen y un bloque de texto opcional para anclar la página y establecer un propósito claro

Bloques

Este complemento proporciona 19 bloques.


  • Bloques NHS

  • Navegación del panel

  • Do y Don

  • Botón

  • Bloques NHS

  • Región de promoción

  • Cotización simple

  • Bloques NHS

  • Elementos agrupados

  • Hero Block

  • Lista de contenidos

  • Bloques NHS

  • Fecha de revisión

  • Bloque de rayas

  • Paginación

  • Promociones agrupadas

  • Lista de contenidos dentro de una página

  • Enlace de acción

  • Vínculo trasero

Instalación

Esta sección describe cómo instalar el complemento y hacer que funcione.

  1. Este complemento utiliza la versión principal de Gutenberg incluida en WordPress 5.2 y superior. Si también ejecuta el Gutenberg
    plugin, puede encontrar problemas.
  2. Sube los archivos del complemento al /wp-content/plugins/plugin-name directorio, o instale el complemento a través de la pantalla de complementos de WordPress directamente.
  3. Active el complemento a través de la pantalla ‘Complementos’ en WordPress
  4. Navegue para editar o crear cualquier página o publicación.
  5. Cuando vaya a agregar un nuevo bloque a su contenido, verá una nueva sección titulada “NHS Frontend”. Aquí están todos los bloques nuevos que proporciona este complemento. Experimente: casi todos los bloques tienen variaciones de estilo disponibles.

Preguntas más frecuentes

¿Este complemento está restringido solo a organizaciones del NHS?

Este complemento se ha creado específicamente para su uso en el NHS, pero es un código fuente abierto y puede usarlo en cualquier sitio.

Reseñas

¡Muchas gracias!

Michael Turner
5 de agosto de 2020
Este es un complemento muy útil.

un complemento tan práctico

Danielshaw
23 de abril de 2020
Felicitaciones a Tony Blacker y al equipo de liderazgo del NHS por poner esto a disposición de todos nosotros y su compromiso a largo plazo de realizar las actualizaciones necesarias. Aquí hay muchos bloques fáciles de usar que tendrá problemas para encontrar en otros lugares.

Leer las 2 reseñas

Colaboradores y desarrolladores

“NHS Blocks” es un software de código abierto. Las siguientes personas han contribuido a este complemento.

Colaboradores

  • tblacker

Traduzca “NHS Blocks” a su idioma.

Interesado en el desarrollo?

Explore el código, consulte el repositorio de SVN o suscríbase al registro de desarrollo mediante RSS.

Registro de cambios

1.2.2

  • React y react-test-renderer interno actualizado para evitar conflictos js error crashing editor
  • Se actualizó el código en desuso para garantizar la continuidad de todas las versiones.
  • Se eliminó la dependencia del bloque de botones en la instalación de learndash presente

1.2.1

Revisión para eliminar el error de reacción cada vez que se activaban bloques de héroe o paneles de tablero

1.2

  • La biblioteca ascendente cambió a nhsuk v4
  • Promociones y paneles modificados para funcionar con el nuevo componente de tarjeta nhsuk
  • Comprobación de tema mejorada para ver si Nightingale es un tema activo o un tema principal
  • Revelar el retrabajo del bloque
  • Comprobaciones de jQuery mejoradas para elementos hero y con pestañas

1.1.8

  • Se agregaron bloques internos a tarjetas y revelaciones.
  • palanca agregada para estos bloques internos para activar o desactivar los bloques internos.

1.1.6

  • Se eliminó el requisito para el complemento Gutenberg separado; en su lugar, use la versión central de WP de Gutenberg. Si actualmente tiene
    el complemento de Gutenberg únicamente para que funcione el complemento NHSBlocks, lo alentamos activamente a eliminar el complemento de Gutenberg
    de su implementación para mejorar la estabilidad y el rendimiento.
  • mensajes visualmente ocultos modificados en las tarjetas de atención para que el estado se refleje en los lectores de pantalla
  • tipos de declaración eliminados php7.4 para compatibilidad con versiones anteriores
  • dependencias actualizadas en composer
  • Se agregaron valores predeterminados garantizados a todos los campos de texto para facilitar la edición, experiencia de usuario mejorada
  • Se agregó un estilo de vista previa al selector de bloques para que pueda ver lo que hace cada bloque antes de seleccionarlo.
  • Lógica modificada en el enlace de acción para hacerlo más estable (y reducir la incidencia de notificaciones de “Resolver bloqueo”)

1.1.4

  • Eliminado mucho exceso de estilo en el CSS
  • Asegurado compatible con Gutenberg 7.9.1
  • Probado completamente en temas ajenos al NHS
  • Estilo dirigido en el editor a solo la vista del editor y el panel de vista previa del estilo.

1.1.3

Adición de múltiples bloques nuevos:
* Sección de rayas: rayas blancas y grises alternas de ancho completo que pueden tener bloques internos dentro. Genial por completo
páginas de inicio y páginas de destino de ancho.
* Lista de contenidos – 2 opciones:
* Contenido de la página: detectará automáticamente todas las etiquetas h2 en la página y mostrará enlaces de anclaje a ellas
* Otras páginas: puede agregar manualmente enlaces a otras páginas (o recursos externos) en una lista fácil de usar.
* Fecha de revisión: agregue el bloque y se agregará un área a su página que muestra la fecha de la última revisión (es decir,
. ahora)
* Paginación: desea un botón anterior y siguiente. Agregue este bloque y configure manualmente sus enlaces anterior y siguiente. Excelente
para flujos de proceso o guías de usuario.
* Enlace de acción: quiere sugerir que un usuario siga un enlace, pero no quiere un botón. Utilice un enlace de acción
* Vínculo de retroceso: permite que los usuarios retrocedan una página. (Esto usa javascript -1, por lo que si los usuarios acceden a la página desde otro sitio y
haga clic en este, volverán de donde vinieron….)
Adiciones de opciones de estilo a bloques preexistentes:
* El bloque de tabla principal ahora se puede diseñar como la interfaz nhsuk, con tablas totalmente receptivas
* Las imágenes ahora se pueden modificar al estilo nhusk
* Adición de la opción de llamada de advertencia a las tarjetas. Particularmente útil para alertas de Covid-19
Gracias a @verytwisty por todas las solicitudes de extracción y el apoyo, el 90% de esta actualización es su trabajo.
(También algunos trabajos de reparación para garantizar la compatibilidad del bloque interno con Gutenberg 7.6 y algunas tareas de limpieza menores con el archivo
estructuras)

1.1.2

  • Se agregaron ejemplos para mostrar en la región del selector de bloques para todos los bloques.
  • Panel y grupos modificados para que sean compatibles con Gutenberg 7.5
  • Bibliotecas NPM ascendentes actualizadas: el cambio principal es la biblioteca Frontend NHSUK

1.1.1

  • Actualización menor para actualización de etiqueta estable.

1.1.0

  • Actualizado para Gutenberg 7.4: deberá actualizar Gutenberg para que este complemento continúe funcionando
  • El bloque del tablero y el bloque agrupado cambiaron de __experimentalTemplateOptions a __experimentalBlockVariationPicker
    • Esta es una deuda técnica y será necesario revisarla cuando esta función salga de la fase experimental.
  • Botón de texto predeterminado agregado para una mejor UX
  • El enlace del botón se movió al área del Inspector de la derecha para mejorar la UX
  • Nombre de imagen incorrecto en el bloque del tablero. parece ser un cambio rotundo, ¡no lo es! Cualquiera creado previamente
    panel de control, cuando se edite, aparecerá como contenido no válido debido a esta corrección. Deberá hacer clic en los tres puntos en el
    editor de bloques y haga clic en “resolver” para reparar.
  • Se corrigieron algunos errores css extraños e inusuales.

1.0.5

  • Compatibilidad IE10 / 11 con Hero Block
  • Filtros CSS adicionales para botones, paneles y promociones

1.0.4

  • Filtros js reelaborados para colocar al héroe en el encabezado de la página

1.0.3

  • Se movieron css y js del tema a los bloques para habilitar la funcionalidad independiente
  • Se agregó CSS ​​para evitar conflictos con LearnDash (Conflictos provocados por el complemento Gutenberg, pero no en nuestro regalo)

1.0.1

  • Se agregó el idioma base (inglés) y se aseguró la internacionalización completa. Traducciones bienvenidas 🙂
  • Registrado todos los bloques para que se muestren correctamente en la página del complemento
  • Biblioteca de capturas de pantalla mejorada para una comprensión más clara de la funcionalidad del complemento desde la función de búsqueda de lista de WordPress.org / wp-admin

1.0

  • Primera versión pública estable del complemento.
  • Módulos incluidos:
    • Vínculos del tablero: diseñados para su página de inicio o una sección de inicio. Puede agregar secciones gráficas con superposiciones de texto que enlazan con sus páginas internas.
    • Listas de hacer / no hacer: paneles sencillos con listas de elementos con una marca de verificación o una cruz junto a ellos.
    • Botón: botones de estilo NHS, disponibles como primario (verde), secundario (azul) o inverso (blanco)
    • Revelar: áreas expandibles de la pantalla. Disponible como rejilla estándar (flecha hacia abajo) o expansor (icono más)
    • Paneles: áreas de texto con títulos, texto y botones para llamadas a la acción. Disponible como panel blanco estándar, panel gris o panel blanco con encabezado de color.
    • Promo: cuadros vinculados con texto e imágenes opcionales. Disponible en variantes de texto estándar o más pequeñas.
    • Testimonio: se pueden incluir citas o testimonios con este bloque. Disponible como estándar (texto azul con borde azul a la izquierda) o invertido (texto blanco con fondo azul y borde blanco a la izquierda)
    • Tarjetas – Tarjetas de información. Encabezados de colores con una flecha que apunta al contenido del texto. Disponible como tarjeta de atención estándar, advertencias (encabezado rojo) o alertas (encabezado rojo, cuerpo negro)
    • Elementos agrupados: diseños de elementos preconfigurados, con testimonios, paneles o promociones dentro de cada campo.
    • Banner de héroe: una imagen de héroe de ancho de pantalla completa, con cuadro de superposición de texto opcional que incluye título y lema. Ideal para anclar gráficamente las secciones de su sitio web.

Por favor Comparte y Síguenos:
RSS
Follow by Email
Facebook
Twitter

Deja una respuesta