How to Fix Invisible Text When Copying Blocks in Gutenberg

My WordPress Setup:

WordPress Astra Pro theme, Spectra Legacy, Gutenberg and Jetpack.

Summary: Invisible Text When Copying Blocks in Gutenberg

If you select several blocks in the WordPress Gutenberg editor, whether in the post editor or using List View, the selected text suddenly turns white. The text stays white and unreadable after you copy it (by pressing Ctrl + C or right-clicking and choosing Copy), even though normal operations on a single block work as they should.

The problem is caused by inline block-level CSS markup that has become corrupted or is out of date and has been saved directly in the block’s database attributes. When you select multiple blocks, Gutenberg places them inside an active selection container, so malformed inline CSS variables from one faulty block spill over to the whole selection.

Symptoms

When you highlight several text blocks (such as paragraphs or headings) in the Gutenberg editor, the text becomes invisible or turns white.
When you use the List View panel to select multiple items, you get the same white-text issue.
When you press the “Copy” button, the selected text gains an active focus state, which causes it to turn white.
The standard site-wide theme styles, Customiser settings, and child theme CSS rules do not fix the problem.
On clean test pages, individual paragraph blocks work properly, but the problem appears on complex pages that contain certain styled blocks.

Diagnostic Steps Taken

To verify the theme and CSS settings, I switched from the Astra Child theme to the parent Astra theme, cleared the browser cache, and removed the server-side cache using LiteSpeed. I added custom CSS rules in style-editor.css and admin_head files, but it made no difference, because the problem was caused by inline block markup, not the theme’s stylesheets.
Plugin support teams recommend deactivating plugins to identify conflicts. Even if deactivating the plugin that causes the problem (for example, Jetpack) temporarily fixes the symptom, the issue returns when you reactivate it if the corrupt post markup still hasn’t changed.
Finding the Trigger Block: I created a test page and added the elements I normally use, one by one, checking for the multi-selection problem after each addition. The selection glitch showed up as soon as I added the block with custom sidebar styles (in this instance, the Jetpack Subscription button block).

Screenshot of the Jetpack Subscription block causing invisible text when copying blocks in Gutenberg — *The Jetpack Subscription block was causing invisible text when copying blocks in Gutenberg*

The Solution: Clearing Ghost Block Markup

The permanent solution doesn’t require custom PHP code, admin CSS hacks, or turning off essential plugins. All you need to do is force WordPress to clear and regenerate the block’s inline CSS attributes.

Locate the Problematic Block: Identify the custom or third-party block on the page (in my case, this was the Jetpack Subscription block), a complex container, or a third-party block plugin.

To select the offending block, click the block to open its options in the right-hand Inspector panel.
For custom styles, go to the Styles/Colour settings in the sidebar panel.
Reset the styling by removing all custom colours, borders, and typography settings to clear the stored inline CSS variables.
Apply your styling again: start over with the colour and typography settings you want. This will cause Gutenberg and the plugin to produce new, clean block markup in the database.
When you update the page or post, refresh the editor, then select several blocks; the multi-selection highlighting and copying functions will keep the text dark and readable.

Why This Works Across Gutenberg Blocks

WordPress stores custom block panel settings directly in the post content HTML as comment attributes and inline CSS variables; if a plugin update changes how custom properties are formatted, existing posts may keep old or incorrectly formatted inline declarations.

When you multi-select blocks, Gutenberg wraps them in a single focus wrapper (.is-multi-selected). A single block with corrupted contrast rules can spread its properties to the whole selection group. If you clear the block’s sidebar settings, Gutenberg removes the faulty inline attributes and resolves the selection leak for all blocks.

While I isolated the fix myself through step-by-step testing on a clean draft, I worked with Google Gemini to break down the underlying technical reasons why Gutenberg’s inline CSS variables were leaking across the selection overlay.

Have you come across the issue of invisible text when copying blocks in Gutenberg and did this fix help? I would love to hear from you in the comments section.

Enjoy reading my commentary? Add South Coast View as a Preferred Source on Google to see new posts first.

Subscribe to future posts on this website by email. No spam, just an email when a new post is published. View the posts. Please remember to confirm your subscription in the confirmation email you receive!