Accordion Blocks vs Rich Text Formats

Accordion Blocks is a simple plugin that adds a Gutenberg block for adding accordion drop-downs to your pages. The accordions should blend seamlessly with your theme. However, you may want to add custom styles to your theme. Features Adds a Gutenberg block for adding accordions to your site. Supports multiple accordions with individual settings for each accordion item. Fully responsive. Support for item IDs and direct links. Supports nesting accordions. Accessible (for users requiring tabbed keyboard navigation control). Optional Features Open individual accordion items by default. Disable auto closing of accordion items. Manually close items by clicking the title again. Scroll page to title when it’s clicked open (including setting a scroll offset position). Set the HTML heading tag for the title element (h1–h6, button). Set defaults to be applied to all new accordion items or reset a specific accordion item to the defaults. Supports adding custom block styles using wp.blocks.registerBlockStyle. Output The plugin will ultimately output following HTML (simplified for this example): Title with H2 tag Content Custom CSS You can use the following CSS classes to customize the look of the accordion. .c-accordion__item {} /* The accordion item container */ .c-accordion__item.is-open {} /* is-open is added to open accordion items */ .c-accordion__item.is-read {} /* is-read is added to accordion items that have been opened at least once */ .c-accordion__title {} /* An accordion item title */ .c-accordion__title--button {} /* An accordion item title that is using a ` ` tag */ .c-accordion__title:hover {} /* To modify the style when hovering over an accordion item title */ .c-accordion__title:focus {} /* To modify the style when an accordion item title currently has broswer focus */ .c-accordion__content {} /* An accordion item content container */

BlaBlaBlocks Formats lets you enhance your Gutenberg editor with interactive rich text formats like tooltips, markers, inline typography controls, and formatting utilities directly inside WordPress. No coding needed. Just select your text, choose a format, and instantly make your content more engaging. With BlaBlaBlocks Formats, you can add animated markers, interactive tooltips, inline typography styling, and quick formatting controls to improve readability and emphasize key information. Key Features Interactive text formats – Add InfoTips, markers, typography controls, and clear formatting directly from the block toolbar. Live customization – Change color, animation, and behavior in real time. Lightweight & optimized – Assets load only when formats are used. Native Gutenberg integration – Seamlessly fits the WordPress Block Editor. Why Choose BlaBlaBlocks Formats? Because plain text doesn’t always tell the full story! Highlight key phrases, provide helpful InfoTips, adjust inline typography, or quickly remove formatting, all within the familiar block editor UI. No shortcodes or custom HTML needed. 100% visual control inside the editor. Works with all themes and blocks. How It Works Select any text in the Gutenberg editor. Choose a format such as Marker, InfoTip, Typography, or Clear formatting. Adjust style and behavior using the sidebar options. See the preview instantly. Formats are rendered on both editor and frontend views with minimal code overhead. Use Cases Add InfoTips to glossary terms or product details. Highlight important phrases in tutorials or documentation. Apply inline typography styles to emphasize selected text. Clear unwanted formatting from copied or edited content. Available Formats 1. Marker Underline or highlight text segments with customizable color and animation. 2. InfoTip Attach informative tooltips to any text selection perfect for definitions, links, or extra context. 3. Typography Apply inline typography styles such as font family, font size, appearance, letter spacing, and letter case. 4. Clear formatting Remove applied inline formatting from selected text with a single toolbar action. Customization Options Marker color & animation style Tooltip position, size, and behavior Typography presets and inline text styling Backend-only or frontend-visible options Per-format settings saved automatically Performance & Optimization BlaBlaBlocks Formats loads assets only when necessary, reducing frontend bloat. No React, Redux, or large JS libraries Powered by the web component, not loaded on the public site unless formats are active. Open Source and Free The BlaBlaBlocks Formats is open source. Not only is it free to use, but you are also welcome to collaborate and contribute to its development. Source Code: https://github.com/lubusIN/blablablocks-formats Report Issues: https://github.com/lubusIN/blablablocks-formats/issues Documentation: https://github.com/lubusIN/blablablocks-formats/wiki