Rich Text Formats
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
Top keywords
- formats11×2.64%
- text10×2.40%
- typography9×2.16%
- formatting8×1.92%
- inline7×1.68%
- editor6×1.44%
- blablablocks5×1.20%
- blablablocks formats5×1.20%
- inline typography5×1.20%
- clear4×0.96%
- add3×0.72%
- animation3×0.72%
Breadcrumb Block
This is a single-block plugin for the breadcrumb trail. It’s simple, lightweight, SEO-friendly, and WooCommerce compatibility. It also includes some simple separator icons. It works everywhere: Page Editor, Site Editor, and template files. How to customize the breadcrumb How to change/remove an item? add_filter( 'breadcrumb_block_get_item', function ( $item_args, $context, $breadcrumbs_instance ) { // Ignore items without context. if ( ! $context || ! ( $context['object'] ?? false ) ) { return $item_args; } // Eg: remove a term. if ( 'term' === ( $context['type'] ?? '' ) && 'term-slug' === $context['object']->slug ) { return false; } // Eg: Change the title of a page. if ( 'page' === ( $context['type'] ?? '' ) && page_id_to_change === $context['object']->ID ) { $item_args[0] = 'Make it shorter'; } return $item_args; }, 10, 3 ); $item_args is a 3-item array: [$item_label, $item_link, $item_attrs] $context is an associative array: ['type' => 'item type', 'object' => 'item object']. type can be one of the following values: front_page, home, shop, page, post, single, term, taxonomy, post_type_archive, search, 404, paged, author, date_year, date_month, date_day, attachment. How to change the markup of the block? add_filter( 'breadcrumb_block_get_breadcrumb_trail', function ( $markup, $args, $breadcrumbs_instance ) { return $markup; }, 10, 3 ); How to add or remove the items from the breadcrumb trail? add_filter( 'breadcrumb_block_get_items', function ( $items, $breadcrumbs_instance ) { return $items; }, 10, 2 ); How to use a custom separator for the breadcrumb trail? add_filter( 'breadcrumb_block_get_args', function ( $args ) { // For example, change separator. $args['separator'] = ' '; return $args; } ); The custom separator should be an inline SVG. To make sure it displays properly, it should have three attributes: width, height, and fill. The values of these attributes should be as follows: fill="currentColor" width="1em" height="1em". Using this hook, you can customize other attributes such as container, before, after, list_tag, item_tag, item_before, item_after, separator. How to prepend the blog page to all single posts? add_action( 'breadcrumb_block_single_prepend', function ( $post, $breadcrumbs_instance ) { if ( 'post' === $post->post_type ) { $blog_id = get_option( 'page_for_posts'); if ( $blog_id ) { $breadcrumbs_instance->add_item( get_the_title( $blog_id ), get_permalink( $blog_id ) ); } } }, 10, 2 ); If this plugin is useful for you, please do a quick review and rate it on WordPress.org to help us spread the word. I would very much appreciate it. Please check out my other plugins if you’re interested: Content Blocks Builder – Build custom layouts and blocks visually in the Block Editor without needing a code editor, using only core blocks and native Gutenberg features. Meta Field Block – A single block to display custom fields in the Block Editor without coding. It supports ACF, MetaBox, WooCommerce, meta, rest field, shortcode and more. Works everywhere: in the Site Editor (FSE), the Block Editor, inside Query Loop, WooCommerce Product Collection, Term Query blocks, and even in template files. SVG Block – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library. Icon separator – A tiny block just like the core/separator block but with the ability to add an icon. Block Enhancements – Adds practical features to blocks like icons, box shadows, transforms, etc. Counting Number Block – A block to display numbers with a counting effect Better YouTube Embed Block – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists. The plugin is developed using @wordpress/create-block.