While Gutenberg’s Details block is an incredible tool for showcasing structured data within your WordPress posts and pages, its built-in icons can leave something to be desired. Often appearing plain and uninspired, these default icons might not fully capture the attention of your readers or effectively represent the content you’re trying to highlight.
This can be a drawback, especially if you’re aiming to create visually engaging and informative content that stands out.
We will demonstrate in this article how to replace the default icons in your Details blocks with your preferred icons without the help of any third-party plugins. This straightforward alteration can greatly improve your content’s visual attractiveness and increase reader engagement.
Steps to Add Custom Icon to Details Block in Gutenberg
Step 1: Add the Details Block
First, go to the WordPress Gutenberg editor by creating a new post type (page or post), or you can select the existing one. Once you are in the Gutenberg editor, add the Details block, then tweak it to your preference.
As you can see, the Details block appears with two elements when it is added; a summary and a hidden block element. We will use the Details block for the FAQ content in this example. Therefore, the question will be placed in the summary element, and the hidden block element will serve as its answer.
Step 2: Add the CSS Class
Next, we are going to add the CSS class to the Details block. On the Details block settings, navigate to Advanced -> ADDITIONAL CSS CLASS(ES). Afterward, add the wpp-details to the ADDITIONAL CSS (ES) input field.
Step 3: Add the Custom CSS Snippet
Next, you need to add the additional CSS to your WordPress site.
On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the available field. If you use a block theme, you may need to enable the theme customizer first.
Here is an example of the CSS snippet you can use:
.wp-block-details.wpp-details[open] {
border: solid 1px #ffffff;
padding-bottom: 30px;
}
.wp-block-details.wpp-details summary {
background: #f5f5f5;
padding: 3px 15px;
margin: 0;
list-style-position: outside;
}
.wp-block-details.wpp-details summary:hover {
background-color: #a1ffc2;
}
.wp-block-details.wpp-details > * {
margin: 10px 20px;
margin-block-start: 1.5rem;
}
.wp-block-details.wpp-details summary::marker {
display: none;
}
.wp-block-details.wpp-details summary::-webkit-details-marker {
color: transparent;
width: 0;
}
.wp-block-details.wpp-details summary::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2em' height='1.2em' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M208 32H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-24 104h-48v48a8 8 0 0 1-16 0v-48H72a8 8 0 0 1 0-16h48V72a8 8 0 0 1 16 0v48h48a8 8 0 0 1 0 16'/%3E%3C/svg%3E");
display: inline-block;
width: 20px;
margin-right: 7px;
vertical-align: middle;
}
.wp-block-details.wpp-details[open] summary::marker {
content: '';
}
.wp-block-details.wpp-details[open] summary::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1.2em' height='1.2em' viewBox='0 0 256 256'%3E%3Cpath fill='black' d='M208 32H48a16 16 0 0 0-16 16v160a16 16 0 0 0 16 16h160a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-24 104H72a8 8 0 0 1 0-16h112a8 8 0 0 1 0 16'/%3E%3C/svg%3E");
}
Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.
To see the result, you can preview your page by clicking the Preview button. Don’t forget to save or publish your page if you want to.
Tips: Rather than assigning a separate CSS class to every Details block you have, you can group them and apply the class to the group. However, you will have to replace it in that scenario. In the CSS snippet, replace the the .wp-block-details.wpp-details with .wpp-details .wp-block-details.
What Does the CSS Code Do?
Overall style .wp-block-details.wpp-details:
- Adds a solid 1px border with the color
#ffffffwhen the element is open[open]. - Adds 30 pixels of padding to the bottom when open.
Summary element style .wp-block-details.wpp-details summary:
- Defines padding of 3 pixels on the sides and 15 pixels on the top and bottom.
- Removes the margin.
- Sets the summary marker (list-style-position) outside the summary text.
- Change the hover background color to
#f5f5f5.
Hiding the default summary marker/icon .wp-block-details.wpp-details summary::marker, .wp-block-details.wpp-details summary::-webkit-details-marker:
- Hides the default summary marker using two methods to ensure compatibility across different browsers.
Customize the summary icon on the closed state .wp-block-details.wpp-details summary::before:
- Inserts a custom icon using inline SVG code (data URI). This is a black square plus icon.
- Positions the icon with a width of 20px, a margin-right of 7px, and vertical alignment in the middle of the text.
Icon change on open state .wp-block-details.wpp-details[open] summary::before:
- When the hidden block (answer element) in the Details block opens, the icon is changed to a black square minus icon using a different SVG code (data URI).
(Bonus) Select Your Preferred Icon
As we mentioned in “What does the CSS Code do?” above, we replace the default icons in the Details block on the close and open states by inserting a custom icon using inline SVG code (data URL). This means, you can use any icon you like by replacing the inline SVG code (data URL) in the CSS snippet.
Many great online icon libraries and toolkits provide SVG code (data URL), such as Font Awesome, Iconify, and many more.
In this tutorial, we use Iconify to search for the icons we add to the Details block. Iconify allows you to use many open-source icon sets with a wide choice of open-source icon components, so we recommend you use Iconify to make it easier.
The Bottom Line
This article shows how easily you can unlock the power of custom icons. Don’t be afraid to experiment with the CSS snippet! Explore different icon styles and colors to perfectly match your brand identity and create a visually organized editing experience.
With a little creativity, you can transform the details block from a simple informational element into a signature design feature within your Gutenberg workflow.
