When you apply a block style using this option, WordPress adds a CSS class to the block. In this case,
is-style-text-annotation You can add your CSS to that class name.
You also have to enqueue the font family to show the icons correctly.
If you want to edit the JSON file, don’t do it in the parent theme directly:
– Changes made to the JSON files may not be applied to your site if you have saved styles in the Site Editor. WordPress will use those saved changes first, before using the file.
– You will loose changes you have made to the files if you install a theme update.
So use the “Additional CSS” field and / or a child theme.
Example of updated 03-annotation.json: Note the use of & before the ::before: And the escaping of the symbol using \
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Annotation",
"slug": "text-annotation",
"blockTypes": ["core/heading", "core/paragraph"],
"styles": {
"css": "width: fit-content; &::before { font-family: dashicons; content: '\\f348'; }",
"typography": {
"fontSize": "var:preset|font-size|small",
"lineHeight": "1.5",
"letterSpacing": "normal"
},
"border": {
"color": "currentColor",
"style": "solid",
"width": "1px",
"radius": "16px"
},
"spacing": {
"padding": {
"top": "0.2rem",
"right": "0.6rem",
"bottom": "0.25rem",
"left": "0.6rem"
}
},
"elements": {
"link": {
"typography": {
"textDecoration": "none"
}
}
}
}
}
-
This reply was modified 1 year, 6 months ago by
Carolina Nymark. Reason: more typos
Thank you, Carolina, for your help, explanation, and code snippet. The implementation mostly works, except for issues with font size and padding. As a novice with CSS positioning, I struggled to resolve these problems.
I have spent some time using the CSS and the approach from TT1 Blocks’ assets/css/blocks.css with additional CSS class “callout“. That works in the TT2 theme which I have been using in one of my personal theme (see link below).
p.callout {
background: var(--wp--preset--color--tertiary) !important;
border-left:5px solid var(--wp--preset--color--primary);
color: var(--wp--preset--color--contrast);
padding: 1.5em 3em 1.6em 3.7em;
margin-bottom: 1.5em;
overflow: auto;
position: relative;
border-width: 0 0 0 5px;
border-style: solid;
min-width: 170px;
}
p.callout::before {
content: "\f348";
color: #00a0d2;
font-family: "dashicons";
position: absolute;
font-size: 2em;
top: 0.5em;
left: 0.5em;
}
Output link
https://tinjurewp.com/wordpress-6-7-rollins/
When I use the slightly modified CSS in a TT5 child theme, with is-style-text-annotation class as p.is-style-text-annotation {…}, and p.is-style-text-annotation::before { … }, I get the Dashions font positioning and padding issues. I couldn’t succeed to solve those issues even after trying it out in the browser inspect tool.
It is not entirely clear to me what you want to do.
If you want to use the annotation, then your block will use the styles that are in the json file, unless the user customizes the individual block.
If you want to update the default padding and font size of the annotation, then you need to change the code that is in the styles.
Here is the example again:
See how there is a fontSize mentioned under typography, and padding mentioned under spacing?
You would need to update that.
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"title": "Annotation",
"slug": "text-annotation",
"blockTypes": ["core/heading", "core/paragraph"],
"styles": {
"css": "width: fit-content; &::before { font-family: dashicons; content: '\\f348'; }",
"typography": {
"fontSize": "var:preset|font-size|small",
"lineHeight": "1.5",
"letterSpacing": "normal"
},
"border": {
"color": "currentColor",
"style": "solid",
"width": "1px",
"radius": "16px"
},
"spacing": {
"padding": {
"top": "0.2rem",
"right": "0.6rem",
"bottom": "0.25rem",
"left": "0.6rem"
}
},
"elements": {
"link": {
"typography": {
"textDecoration": "none"
}
}
}
}
}
