CHECKING STATUS
I AM LISTENING TO
|

How to access Gutenberg Block Text-Selections / Text-Formats and other Mysteries

5. October 2024
.SHARE

Table of Contents

Gutenberg Documentation

While Gutenberg is becoming more stable with each release, documentation is only growing slowly. Many parts are outdated, superficial or completely undocumented.

For more complex or individual requirements you have to dive deep. Gladly the browser console allows you to easily checkout what is driving the editor.

Open your browser developer console and start exploring wp. / wp.data. / wp.api. .

What each function does, can be read in the Block Editor Handbook

This is all nice, but how do I actually use these?

At this stage of the development, many things are still changing. So using the API direcly is mostly a matter of reading the documentation, checking the implementation within the core codebase and using trial & error. 

Some mysteries have already been solved by others or they provide the right lead. Check Stack Overflow and especially the WordPress Development area for solutions. 

Its still like a treasure hunt most of the time LOL Perfect for those that love to solve puzzles :) 
Just my cup of tea or better coffee!

Do I need to learn React?

It surely is a benefit, as the whole Gutenberg Editor is build upon React. But for simple tweaks its not a must. But once you start going deeper, you will see the benefit and will learn to love React yourself.

What about ES6, ESNext vs ES5?

ECMAScript 6 is also known as ES6 and ECMAScript 2015. 

ES5 is on its way out and ES6 is supported on all modern browsers since end of 2016

Older browsers can be supported using a polyfill, that augments those browsers and allows them to use the new ES6 features. 

React and also Gutenberg builds on the new Javascript functionality, but ES5 examples can also be found. 

You can also easily compile ES6 to ES5 using Babel in your development environment or online.

Solving Mysteries!

I will be using the following sections to highlight some things that puzzled me and might help others to get a grip on things. I will be extending this, as I discover or solve more Gutenberg mysteries :) 

I will keep the example code in ES5 for now, as that is the easiest way to start tinkering. I will also focus on things that can be used from external code. Most of the small code snippets are connected to each other.

Mystery 1: Text Selection & Formats

These little code snippets are all connected and showcase how to retrieve a selection from a block and change or remove a text format.

Wait for domReady

Make sure the editor has loaded and the DOM can be accessed.

Access the active block

Access active block selection

The actual offset can be found within the OBJECT

Get block HTML content

Create Richtext object

Get active text formats

Check if format is active for selected text

This function is documented, but wont work from the outside that easily. This normally checks the isActive state of the component. Here a small workaround using Lodash

Formats are saved within the Richtext object under formats and the text formats are stored within arrays that correspond to the actual index + range of the selection. So if a text-color has been applied from index 4 to 8, you will find the corresponding array for that. 

Works well and does the trick for now. Here the output from the developer console, showing the arrays for an 18 character long paragraph:

Apply a new text format to selection

I am using the core/text-color format with applyFormat as an example, can be anything.

Insert text at start of selection

insertObject can insert content at the start of the selection, with the rest between selectionStart and selectionEnd getting removed. There is also insert, which allows you to simply add a HTML string into the Richtext value.

Remove text format from selection

removeFormat allows you to remove a text format from the current selection.

Would be nice to use toggleFormat here, but that works within native components and not by selection index as the two calls above.

Convert Richtext value to HTML

Replace current block content

Whats Next?

I will add some more Gutenberg examples in the future. 

Enjoy coding and keep tinkering :)

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

RELATED POSTS

Days Of Docker 6

Day 6: Monocker – Monitor Docker – 7 Days of Docker

Monitoring the health and status of Docker containers is crucial for maintaining a reliable and efficient environment. Monocker is a lightweight tool designed to address this need by monitoring Docker container state changes and sending real-time alerts through various messaging platforms. What is Monocker? Monocker, short for “MONitors dOCKER,” is an open-source application that keeps […]

The Letters Of The Alphabet Are Arranged Crosswise 2023 11 27 05 02 11 Utc

Best Solutions to Run WordPress Locally 2025

Running WordPress locally is essential for testing, development, and experimentation without affecting a live website. There are several solutions available, each catering to different needs. Below, we explore the best ways to set up WordPress on your local machine, along with useful links. 1. Local by Flywheel Local is a powerful, free local development environment […]

Days Of Docker5

Day 5: mosparo an Open-Source Spam Protection solution – 7 Days of Docker

If you’re looking for an efficient and streamlined way to integrate mosparo, an open-source spam protection solution, into your workflow, running it via Docker is an excellent choice. Docker allows you to deploy mosparo quickly without worrying about dependencies or manual configurations. In this guide, we’ll walk through setting up mosparo with Docker. Prerequisites Before getting […]

Alexander

I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs


I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.