Modal Guten Block

Descripción

This project provides a modal / popup block for the WordPress Gutenberg editor.

  • Multiple methods for triggering modal including button, text link, image link, external class, and page load.
  • User definable modal content using Gutenberg blocks, for example, image, paragraph etc.
  • Support for multiple modal window sizes.
  • Lots of customizable options including Trigger Button Label, Button Color, Trigger Text, Trigger Text Size, Trigger Image, Trigger Class, Modal Delay, Trigger Element Alignment, Overlay Background Color, Title Text Size, Title Font Color, Title Background Color, Title Padding, Border Radius.
  • Supports multiple modals on the same page.
  • ADA compliant.
  • Uses create-guton-block for easy config.

Donations

If you like the plugin, consider a donation to support further development. Click here

Capturas

  • Sample modal window.
  • Modal Guten Block in editor.

Bloques

Este plugin proporciona 1 bloque.

  • Modal Guten Block

Instalación

From your WordPress dashboard

  1. Visit Plugins > Add New
  2. Search for «Modal Block»
  3. Install the «Modal Block» plugin
  4. Activate «Modal Block» from your Plugins page
  5. Insert Block on your Gutenberg Editor and select «Modal Block» which is located in Widgets.

Reseñas

9 de octubre de 2021
Thank you for this plugin! Works great and I gladly put in a donation to support your efforts. It is absolutely worth five stars as is, but it would be perfect if I could also trigger a pop-up by clicking on a text link, like a few words in an text block, which is what I do now to link to a URL accessible item. So in addition to the dedicated text trigger option you already have, but which creates a dedicated block. I don't know if that is even possible of course. If not, no problem, still a great plug-in.
7 de septiembre de 2021
Hey just wanted to say great plugin! I've been looking for a modal block for a while now, and this is fairly close to perfect. There are only two major issues that i can see. Dependency on Jquery. Its not ADA compliant. Jquery - Most of my projects don't use Jquery any more and I'd hazard to say this is becoming true for more and more front end work. I cant justify loading an entire library for 1 modal. ADA compliance - Its best practice to ensure all components are accessible and work at least toward basic ADA compliance. For modals this usually means setting focus and focus trapping within the context of the modal as well as announcing the modal to screen readers. https://uxdesign.cc/how-to-trap-focus-inside-modal-to-make-it-ada-compliant-6a50f9a70700

TOP

20 de mayo de 2020
Thank you! it work very well Cheers 😉
4 de marzo de 2020
Saved me a lot of time. Thank you. light-weight and easy to use for my clients. Its genius that you can edit the modal content with Gutenberg and add other blocks to it. Styling could be improved though.
Leer todas las 7 reseñas

Colaboradores y desarrolladores

«Modal Guten Block» es un software de código abierto. Las siguientes personas han colaborado con este plugin.

Colaboradores

Traduce «Modal Guten Block» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

1.4

  • Make ADA compliant including using button instead of span, setting / returning focus and focus trapping.
  • Add custom class to dialog when modal opens.
  • Add toggle option to disable close on overlay click.

1.3

  • Optional display only once for timer based modals. Modal Id links timer modals on different pages to say they are the same. Also ability to say how long before modal is shown again.

1.2

  • Change icon to use SVG – use alt tag from trigger image – optional close btn in modal

1.1

  • Update for deprecated wp.editor (changed to wp.blockEditor) and core/editor (changed to core/block-editor).

1.0.0 (8/19/2019)

  • First release