{"id":376237,"date":"2023-01-09T05:56:19","date_gmt":"2023-01-09T13:56:19","guid":{"rendered":"https:\/\/css-tricks.com\/?p=376237"},"modified":"2023-02-06T07:09:39","modified_gmt":"2023-02-06T15:09:39","slug":"styling-buttons-in-wordpress-block-themes","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/styling-buttons-in-wordpress-block-themes\/","title":{"rendered":"Styling Buttons in WordPress Block Themes"},"content":{"rendered":"\n

A little while back, Ganesh Dahal penned a post here on CSS-Tricks<\/a> responding to a tweet that asked about adding CSS box shadows on WordPress blocks and elements. There\u2019s a lot of great stuff in there that leverages new features that shipped in WordPress 6.1 that provide controls for applying shadows to things directly in the Block Editor and Site Editor UI.<\/p>\n\n\n\n

Ganesh touched briefly on button elements in that post. I want to pick that up and go deeper into approaches for styling buttons in WordPress block themes. Specifically, we\u2019re going to crack open a fresh theme.json<\/code> file and break down various approaches to styling buttons in the schema.<\/p>\n\n\n\n

Why buttons, you ask? That\u2019s a good question, so let\u2019s start with that.<\/p>\n\n\n\n\n\n\n

`The different types of buttons<\/h3>\n\n\nWhen we\u2019re talking about buttons in the context of the WordPress Block Editor, we have to distinguish between two different types:<\/p>\n\n\n\n`
\n
Child blocks inside of the Buttons block<\/li>\n\n\n\n
Buttons that are nested inside other block (e.g. the Post Comments Form block)<\/li>\n<\/ol>\n\n\n\n
If we add both of these blocks to a template, they have the same look by default.<\/p>\n\n\n\n
$\"A$ <\/figure>\n\n\n\n
But the markup is very different:<\/p>\n\n\n\n
<div class=\"wp-block-button\">\n <a class=\"wp-block-buttonlink wp-element-button\">Button 1<\/a>\n<\/div>\n<p class=\"form-submit wp-block-button\">\n <input name=\"submit\" type=\"submit\" id=\"submit\" class=\"wp-block-buttonlink wp-element-button\" value=\"Post Comment\"> \n<\/p><\/code><\/pre>\n\n\n\nAs we can see, the HTML tag names are different. It\u2019s the common classes \u2014 .wp-block-button<\/code> and .wp-element-button<\/code> \u2014 that ensure consistent styling between the two buttons.<\/p>\n\n\n\nIf we were writing CSS, we would target these two classes. But as we know, WordPress block themes have a different way of managing styles, and that\u2019s through the theme.json<\/code> file. Ganesh also covered this in great detail<\/a>, and you\u2019d do well giving his article a read.<\/p>\n\n\n\n So, how do we define button styles in theme.json<\/code> without writing actual CSS? Let\u2019s do it together.<\/p>\n\n\n Creating the base styles<\/h3>\n\n\ntheme.json<\/code> is a structured set of schema written in property:value pairs. The top level properties are called \u201csections\u201d, and we\u2019re going to work with the styles<\/code> section. This is where all the styling instructions go.<\/p>\n\n\n\n We\u2019ll focus specifically on the elements<\/code> in the styles<\/code>. This selector targets HTML elements that are shared between blocks. This is the basic shell we\u2019re working with:<\/p>\n\n\n\n\/\/ theme.json\n{\n \"version\": 2,\n \"styles\": {\n \"elements\": {\n \/\/ etc.\n }\n }\n}<\/code><\/pre>\n\n\n\nSo what we need to do is define a button<\/code> element.<\/p>\n\n\n\n={\n \"version\": 2,\n \"styles\": {\n \"elements\": {\n \"button\": {\n \/\/ etc.\n }\n }\n }\n}<\/code><\/pre>\n\n\n\nThat button<\/code> corresponds to HTML elements that are used to mark up button elements on the front end. These buttons contain HTML tags that could be either of our two button types: a standalone component (i.e. the Button block) or a component nested within another block (e.g. the Post Comment block).<\/p>\n\n\n\n Rather than having to style each individual block, we create shared styles. Let\u2019s go ahead and change the default background and text color for both types of buttons in our theme. There\u2019s a color<\/code> object in there that, in turn, supports background<\/code> and text<\/code> properties where we set the values we want:<\/p>\n\n\n\n{\n \"version\": 2,\n \"styles\": {\n \"elements\": {\n \"button\": {\n \"color\": {\n \"background\": \"#17a2b8\",\n \"text\": \"#ffffff\"\n }\n }\n }\n }\n}<\/code><\/pre>\n\n\n\nThis changes the color of both button types:<\/p>\n\n\n\n<\/figure>\n\n\n\nIf crack open DevTools and have a look at the CSS that WordPress generates for the buttons, we see that the .wp-element-button<\/code> class adds the styles we defined in theme.json<\/code>:<\/p>\n\n\n\n.wp-element-button {\n background-color: #17a2b8;\n color: #ffffff;\n}<\/code><\/pre>\n\n\n\nThose are our default colors! Next, we want to give users visual feedback when they interact with the button.<\/p>\n\n\nImplementing interactive button styles<\/h3>\n\n\nSince this is a site all about CSS, I\u2019d bet many of you are already familiar with the interactive states of links and buttons. We can :hover<\/code> the mouse cursor over them, tab them into :focus<\/code>, click on them to make them :active<\/code>. Heck, there\u2019s even a :visited<\/code> state to give users a visual indication that they\u2019ve clicked this before.<\/p>\n\n\n\nThose are CSS pseudo-classes<\/a> and we use them to target a link\u2019s or button\u2019s interactions<\/a>.<\/p>\n\n\n\n In CSS, we might style a :hover<\/code> state like this:<\/p>\n\n\n\n a:hover {\n \/* Styles *\/\n}<\/code><\/pre>\n\n\n\nIn theme.json<\/code>, we\u2019re going to extend our existing button declaration with these pseudo-classes.<\/p>\n\n\n\n{\n \"version\": 2,\n \"styles\": {\n \"elements\": {\n \"button\": {\n \"color\": {\n \"background\": \"#17a2b8\",\n \"text\": \"#ffffff\"\n },\n \":hover\": {\n \"color\": {\n \"background\": \"#138496\"\n }\n },\n \":focus\": {\n \"color\": {\n \"background\": \"#138496\"\n }\n },\n \":active\": {\n \"color\": {\n \"background\": \"#138496\"\n }\n }\n }\n }\n }\n}<\/code><\/pre>\n\n\n\nNotice the \u201cstructured\u201d nature of this. We\u2019re basically following an outline:<\/p>\n\n\n\n\nElements\n\nElement\n\nObject\n\nProperty\n\nValue<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\nWe now have a complete definition of our button\u2019s default and interactive styles. But what if we want to style certain buttons that are nested in other blocks?<\/p>\n\n\n Styling buttons nested in individual blocks<\/h3>\n\n\nLet\u2019s imagine that we want all buttons to have our base styles, with one exception. We want the submit button of the Post Comment Form block to be blue. How would we achieve that?<\/p>\n\n\n\n This block is more complex than the Button block because it has more moving parts: the form, inputs, instructive text, and the button. In order to target the button in this block, we have to follow the same sort of JSON structure we did for the button<\/code> element, but applied to the Post Comment Form block, which is mapped to the core\/post-comments-form<\/code> element:<\/p>\n\n\n\n {\n \"version\": 2,\n \"styles\": {\n \"elements\" {\n \"button\": {\n \/\/ Default button styles\n }\n }\n \"blocks\": {\n \"core\/post-comments-form\": {\n \/\/ etc.\n }\n }\n }\n}<\/code><\/pre>\n\n\n\nNotice that we\u2019re no longer working in elements<\/code> anymore. Instead, we\u2019re working inside blocks<\/code> which is reserved for configuring actual blocks. Buttons, by contrast, are considered a global element since they can be nested in blocks, even though they are available as a standalone block too.<\/p>\n\n\n\n The JSON structure supports elements within elements. So, if there\u2019s a button<\/code> element in the Post Comment Form block, we can target it in the core\/post-comments-form<\/code> block:<\/p>\n\n\n\n {\n \"version\": 2,\n \"styles\": {\n \"elements\" {\n \"button\": {\n \/\/ Default button styles\n }\n }\n \"blocks\": {\n \"core\/post-comments-form\": {\n \"elements\": {\n \"button\": {\n \"color\": {\n \"background\": \"#007bff\"\n }\n }\n }\n }\n }\n }\n}<\/code><\/pre>\n\n\n\nThis selector means that not only are we targeting a specific block \u2014 we\u2019re targeting a specific element that is contained in that block. Now we have a default set of button styles that are applied to all buttons in the theme, and a set of styles that apply to specific buttons that are contained in the Post Comment Form block.<\/p>\n\n\n\n <\/figure>\n\n\n\nThe CSS generated by WordPress has a more precise selector as a result:<\/p>\n\n\n\n .wp-block-post-comments-form .wp-element-button,\n.wp-block-post-comments-form .wp-block-button__link {\n background-color: #007bff;\n}<\/code><\/pre>\n\n\n\nAnd what if we want to define different interactive styles for the Post Comment Form button? It\u2019s the same deal as the way we did it for the default styles, only those are defined inside the core\/post-comments-form<\/code> block:<\/p>\n\n\n\n {\n \"version\": 2,\n \"styles\": {\n \"elements\" {\n \"button\": {\n \/\/ Default button styles\n }\n }\n \"blocks\": {\n \"core\/post-comments-form\": {\n \"elements\": {\n \"button\": {\n \"color\": {\n \"background\": \"#007bff\"\n }\n \":hover\": {\n \"color\": {\n \"background\": \"#138496\"\n }\n },\n \/\/ etc.\n }\n }\n }\n }\n }\n}<\/code><\/pre>\n\n\nWhat about buttons that are not in blocks?<\/h3>\n\n\nWordPress automagically generates and applies the right classes to output these button styles. But what if you use a \u201chybrid\u201d WordPress theme that supports blocks and full-site editing, but also contains \u201cclassic\u201d PHP templates? Or what if you made a custom block, or even have a legacy shortcode, that contains buttons? None of these are handled by the WordPress Style Engine<\/a>!<\/p>\n\n\n\n No worries. In all of those cases, you would add the .wp-element-button<\/code> class in the template, block, or shortcode markup. The styles generated by WordPress will then be applied in those instances.<\/p>\n\n\n\n And there may be some situations where you have no control over the markup. For example, some block plugin might be a little too opinionated and liberally apply its own styling. That\u2019s where you can typically go to the \u201cAdvanced\u201d option in the block\u2019s settings panel and apply the class there:<\/p>\n\n\n\n <\/figure>\n\n\nWrapping up<\/h3>\n\n\nWhile writing \u201cCSS\u201d in theme.json<\/code> might feel awkward at first, I\u2019ve found that it becomes second nature. Like CSS, there are a limited number of properties that you can apply either broadly or very narrowly using the right selectors.<\/p>\n\n\n\n And let\u2019s not forget the three main advantages of using theme.json<\/code>:<\/p>\n\n\n\n \nThe styles are applied to buttons in both the front-end view and the block editor.<\/li>\n\n\n\n Your CSS will be compatible with future WordPress updates.<\/li>\n\n\n\n The generated styles work with block themes and classic themes alike \u2014 there\u2019s no need to duplicate anything in a separate stylesheet.<\/li>\n<\/ol>\n\n\n\nIf you have used theme.json<\/code> styles in your projects, please share your experiences and thoughts. I look forward to reading any comments and feedback!<\/p>\n","protected":false},"excerpt":{"rendered":" A little while back, Ganesh Dahal penned a post here on CSS-Tricks responding to a tweet that asked about adding […]<\/p>\n","protected":false},"author":288724,"featured_media":376250,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Styling Buttons in WordPress Block Themes by @fklux","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"1","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1488,264,14583,19028],"class_list":["post-376237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-buttons","tag-wordpress","tag-wordpress-blocks","tag-wordpress-themes"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"https:\/\/mastodon.social\/@csstricks\/109818424724295829","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/12\/wordpress-button.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":375412,"url":"https:\/\/css-tricks.com\/adding-box-shadows-to-wordpress-blocks-and-elements\/","url_meta":{"origin":376237,"position":0},"title":"Adding Box Shadows to WordPress Blocks and Elements","author":"Ganesh Dahal","date":"December 7, 2022","format":false,"excerpt":"The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-box-shadow.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-box-shadow.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-box-shadow.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-box-shadow.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-box-shadow.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":374910,"url":"https:\/\/css-tricks.com\/managing-css-styles-in-a-wordpress-block-theme\/","url_meta":{"origin":376237,"position":1},"title":"Managing CSS Styles in a WordPress Block Theme","author":"Ganesh Dahal","date":"November 7, 2022","format":false,"excerpt":"The way we write CSS for WordPress themes is in the midst of sweeping changes. I recently shared a technique for adding fluid type support in WordPress by way of theme.json, a new file that WordPress has been pushing hard to become a central source of truth for defining styles\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-logo-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-logo-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-logo-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-logo-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-logo-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":312832,"url":"https:\/\/css-tricks.com\/the-wordpress-evolution-toward-full-site-editing\/","url_meta":{"origin":376237,"position":2},"title":"The WordPress Evolution Toward Full-Site Editing","author":"Geoff Graham","date":"March 10, 2021","format":false,"excerpt":"The block editor was a game-changer for WordPress. The idea that we can create blocks of content and arrange them in a component-like fashion means we have a lot of flexibility in how we create content, as well a bunch of opportunities to develop new types of modular content. But\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/wordpress-full-site-editomenu-item-beta.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/wordpress-full-site-editomenu-item-beta.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/wordpress-full-site-editomenu-item-beta.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/wordpress-full-site-editomenu-item-beta.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/wordpress-full-site-editomenu-item-beta.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":277467,"url":"https:\/\/css-tricks.com\/styling-the-gutenberg-columns-block\/","url_meta":{"origin":376237,"position":3},"title":"Styling the Gutenberg Columns Block","author":"Joe Casabona","date":"October 12, 2018","format":false,"excerpt":"WordPress 5.0 is quickly approaching, and the new Gutenberg editor is coming with it. There\u2019s been a lot of discussion in the WordPress community over what exactly that means for users, designers, and developers. And while Gutenberg is sure to improve the writing experience, it can cause a bit of\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/guten-columns.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/guten-columns.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/guten-columns.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/guten-columns.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/guten-columns.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":362799,"url":"https:\/\/css-tricks.com\/a-deep-introduction-to-wordpress-block-themes\/","url_meta":{"origin":376237,"position":4},"title":"A Deep Introduction to WordPress Block Themes","author":"Ganesh Dahal","date":"February 4, 2022","format":false,"excerpt":"The relatively new WordPress editor, also known as the WordPress Block Editor, always under development via the Gutenberg plugin, has been with us since 2018. You can use the block editor on any WordPress theme, provided the theme loads CSS that the blocks use. But there are new themes that\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/wordpress-block-themes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/wordpress-block-themes.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/wordpress-block-themes.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/wordpress-block-themes.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/wordpress-block-themes.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":375278,"url":"https:\/\/css-tricks.com\/using-the-new-constrained-layout-in-wordpress-block-themes\/","url_meta":{"origin":376237,"position":5},"title":"Using The New Constrained Layout In WordPress Block Themes","author":"Ganesh Dahal","date":"November 30, 2022","format":false,"excerpt":"One of the main goals of the WordPress Site Editor (and, yes, that is now the \u201cofficial\u201d name) is to move basic block styling from CSS to structured JSON. JSON files are machine-readable, which makes it consumable by the JavaScript-based Site Editor for configuring a theme\u2019s global styles directly in\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-constrained-layout-clamp.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-constrained-layout-clamp.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-constrained-layout-clamp.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-constrained-layout-clamp.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-constrained-layout-clamp.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/288724"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=376237"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376237\/revisions"}],"predecessor-version":[{"id":377092,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/376237\/revisions\/377092"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/376250"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=376237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=376237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=376237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

The different types of buttons<\/h3>\n\n\nWhen we\u2019re talking about buttons in the context of the WordPress Block Editor, we have to distinguish between two different types:<\/p>\n\n\n\n\nChild blocks inside of the Buttons block<\/li>\n\n\n\n