OtFm Gutenberg Spoiler – (or FAQ) collapse block

Descrição

WordPress 5.0 introduces a block-based editor (codename “Gutenberg”) that offers a streamlined editing experience.
The plugin provides in the block editor 2 types of spoilers:

  • Little Spoiler
  • Box spoiler

Little Spoiler – small spoiler for plain text.

Box spoiler – consists of 2 blocks:
Opening spoiler (Box Spoiler Start) and closing spoiler (Box Spoiler End)
Between them, you insert any block (or several block’s) with content that you want to hide.

In the frontend, the spoiler (accordion) opens with animation.
In the editor you can choose the color design of the spoiler.

Ability to add new colors or replace a set of colors. See FAQ

Want to hide part of the publication? or make up the FAQ? – plugin is perfect for this

Check out all beauty and power of the plugin by watching this video:

Requirements

PHP 5.6+, 7, 7.1, 7.2 or 7.3 recommended for better performance, WordPress 5.5

Translation

Available in English, Russian, Spanish, Swedish, Dutch, Japanese and more other languages in becoming.

Acknowledgements

Thanks to Nilo Velez for Spanish (Spain) translation approval.
Thanks to Yordan Soares for Spanish (Venezuela) translation.
Thanks to Tor-Bjorn Fjellner for Swedish translation approval.
Thanks to Peter Smits for Dutch translation.

Ecrãs

  • Find & add spoiler blocks
  • Little spoiler
  • Box spoiler
  • In frontend
  • Open spoiler

Blocos

Este plugin inclui 3 blocos.

otfm/box-spoiler-start
OtFm Gutenberg Spoiler - (or FAQ) collapse block
otfm/box-spoiler-end
OtFm Gutenberg Spoiler - (or FAQ) collapse block
otfm/little-spoiler
OtFm Gutenberg Spoiler - (or FAQ) collapse block

Instalação

  1. Upload the otfm-gutenberg-spoiler folder to your /wp-content/plugins/ directory or alternatively upload the otfm-gutenberg-spoiler.zip file via the plugin page of WordPress by clicking ‘Add New’ and selecting the zip from your computer.
  2. Activate the OtFm Gutenberg Spoiler WordPress plugin through the ‘Plugins’ menu in WordPress.
  3. Use OtFm Gutenberg Spoiler blocks on your next page or post.

Perguntas frequentes

Accessibility support? Navigation by tab?

Yes!
Navigation by “Tab” button:
The “Up arrow” key pressed – If the focused spoiler is open, you close it
The “Down arrow” key pressed – If the focused spoiler is closed, you open it
Either the “Enter” key or “Space bar” pressed – You toggle the focused spoiler. If it is open, close it; if it is closed, open it.
The “End” key pressed – You move focus to the last spoiler on the page
The “Home” key pressed – You move focus to the first spoiler on the page

Support screen readers

How can I close a lot of blocks?

  1. find “Box Spoiler Start” and paste (spoiler open)
  2. blocks, blocks, blocks…
  3. find “Box Spoiler End” and paste (this spoiler closed)

How can I add my own color?

Add this snippet to your file functions.php:

// add new colors to spoiler
function otfmgs_add_new_colors($colors){
    $colors[]= array( 'color' => '#bd4747', 'name' => 'my_brown' );
    $colors[]= array( 'color' => '#32dd94', 'name' => 'my_green' );
    //... etc

    return $colors;
}
add_filter('otfmgs_colors','otfmgs_add_new_colors');

where: #bd4747 – new hex color

result: https://yadi.sk/i/223x_1-S3e_H1w

(available from plugin version 1.4.0)

How to replace colors with your own set?

Add this snippet to your file functions.php:

// add my color palette to spoiler
function otfmgs_add_my_color_pallete($colors){
    $colors['new'][]= array( 'color' => '#bd4747', 'name' => 'my_brown' );
    $colors['new'][]= array( 'color' => '#32dd94', 'name' => 'my_green' );
    //... etc

    return $colors;
}
add_filter('otfmgs_colors','otfmgs_add_my_color_pallete');

where: #bd4747 – new hex color

result: https://yadi.sk/i/Fv7BaxRLkjj_SA

(available from plugin version 1.4.0)

What WordPress themes work with OtFm Gutenberg Spoiler?

Any properly developed WordPress theme will work with OtFm Gutenberg Spoiler

How do I find the spoiler block?

  1. Go to the block editor (add new post)
  2. Click “insert block”
  3. Search for a block “spoiler” or “otfm” or “faq”

Is OtFm Gutenberg Spoiler free?

Yes! OtFm Gutenberg Spoiler core features are absolutely free.

Where can I ask for help?

Write me Otshelnik-Fm@yandex.ru

Avaliações

8 de Setembro, 2020
Easy to use spoiler plugin (to show or hide content-blocks as an accordion). Simple styled title row with heading, showing or hiding the complete following content-block or only a chunk of text. Looks well in desktop and mobile mode. (For better adaption of different website-designs it would be great if the color of the used borders for title-box and expanded content-box could be easily set via custom CSS code 😉
16 de Setembro, 2019
The most important feature for me was the box spoiler feature. After testing a little bit I can say that everything works fine! 🙂 Maybe you could implement custom colors into GUI.
20 de Setembro, 2018
This is hands down the best spoiler plugin for Gutenberg. It comes with 2 options to choose from: a simple spoiler for text only, and 2-piece spoiler which can be used with any blocks. The way it works is very simple, yet very effective. You just add some Gutenberg blocks between a START SPOILER and END SPOILER blocks, and you get a very good looking dropdown. Very happy with the plugin!
Ler todas as 4 avaliações

Contribuidores e programadores

“OtFm Gutenberg Spoiler – (or FAQ) collapse block” é software de código aberto. As seguintes pessoas contribuíram para este plugin:

Contribuidores

“OtFm Gutenberg Spoiler – (or FAQ) collapse block” foi traduzido para 10 locales. Obrigado aos tradutores pelas suas contribuições.

Traduza o “OtFm Gutenberg Spoiler – (or FAQ) collapse block” para o seu idioma.

Interessado no desenvolvimento?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.

Registo de alterações

2020-08-16

v1.5.1
* Change Text Domain to slug plugin

2020-08-13

v1.5.0
* WordPress 5.5 supports added

2019-04-11

v1.4.0
* new filter: otfmgs_colors – ability to add new colors or replace a set of colors. See FAQ

2019-02-22

v1.3.3
* Compatibility for WordPress v5.1

2019-01-18

v1.3.2
* repository fix update

2019-01-18

v1.3.1
* Rename min.js & min.css files

2019-01-16

v1.3.0
* Accessibility support
Navigation by “Tab” button:
The “Up arrow” key pressed – If the focused spoiler is open, you close it
The “Down arrow” key pressed – If the focused spoiler is closed, you open it
Either the “Enter” key or “Space bar” pressed – You toggle the focused spoiler. If it is open, close it; if it is closed, open it.
The “End” key pressed – You move focus to the last spoiler on the page
The “Home” key pressed – You move focus to the first spoiler on the page

Support screen readers

2018-12-07

v1.2.0
* Compatibility for WordPress v5.0.0

2018-11-30

v1.1.1
* Compatibility for Gutenberg v4.6.0

2018-11-30

v1.1.0
* Compatibility for Gutenberg v4.5.1

2018-11-17

v1.0.9
* Compatibility for Gutenberg v4.4.0

2018-11-15

v1.0.8
* Compatibility for Gutenberg v4.3.0

2018-11-08

v1.0.7
* Compatibility for Gutenberg v4.2.0

2018-10-26

v1.0.6
* fix spoiler bug if isset cover block
* Compatibility for Gutenberg v4.1.1

2018-10-25

v1.0.5
* Compatibility for Gutenberg v4.1.0
* Small css-fix for admin editor

2018-10-06

v1.0.4
* Compatibility for Gutenberg 3.9.0
* Fix content spoiler on apple safari

2018-09-20

v1.0.3
* Support for Gutenberg 3.8.0
* Removed lines that do not need to be translated (proper names)
* Added hints to the translation file (for translate.wordpress.org)

2018-09-12

v1.0.2
* add php file only for service translate.wordpress.org

2018-09-12

v1.0.1
* Small css fix

2018-09-08

v1.0.0
* Release