This is the easy way to add the copy button on the page.
Note: Prefer this option, if you have multiple pages, and want to add the copy button to all those elements. E.g. You have a code block on multiple pages then you can use this easy method.
In this documentation, we are going to see how to add the copy button with the CSS class selector.
Before adding the copy button with the CSS class selector, we need the sample demo page.
We have created the demo page with dummy content.
Great, After creating the demo page, or, checking how the demo page content looks like, let’s see how to use the CSS class as a selector to add the copy button.Top ↑
In this example, we are going to add the copy button to the Blockquote Block from the demo page.
If you are new to the Gutenberg Editor then refer to the below video:Top ↑
To add the copy button with the CSS class selector, do it as:
You’ll see the add new screen something as below:
We are going to add the text as:
Great! We just have added the copy button to all those elements where the demo-class exists as the CSS class.Top ↑
Just refresh the page, and you can see the Copy Blockquote button added to the blockquote from the demo page.
See the below video for reference:Top ↑
Alternatively, You can use the below selectors as well:Top ↑
We are going to add the copy button to the Preformatted Block from the demo page.Top ↑
We are going to add the copy button to the List Block from the demo page.
Join Thousands of Satisfied Customers
Supercharge your content today!