Title: Styling post_terms block Last modified: January 17, 2024 --- # Styling post_terms block * Resolved [audunmb](https://wordpress.org/support/users/audunmb/) * (@audunmb) * [2 years, 4 months ago](https://wordpress.org/support/topic/styling-post_terms-block/) * How can I add styling to the post_terms block? I want tags to display as buttons in my child theme. * I first tried to add styling for the variation ‘post_tags’ in my theme.json, but it didn’t work. * ```wp-block-code "core/post-terms": { "variations": { "post_tags": { ... } }, ``` * AFAIK this should apply styling to tags, but it doesn’t? * I then tried to add a custom block style for the post_terms block, but it didn’t show up in the editor. * ```wp-block-code /* Register block style button-terms */ wp.blocks.registerBlockStyle('core/post-terms', { name: 'button-terms', label: wp.i18n.__('Button style terms', 'textdomain') }); ``` * In the block editor, there is no option to choose a style when I insert the block. Why? All my other block styles work as expected. * Adding the custom block style class (.is-style-button-terms) with the Advanced field where you can add classes work. Viewing 6 replies - 1 through 6 (of 6 total) * [JuanMa Garrido](https://wordpress.org/support/users/juanmaguitar/) * (@juanmaguitar) * [2 years, 4 months ago](https://wordpress.org/support/topic/styling-post_terms-block/#post-17353675) * Hi [@audunmb](https://wordpress.org/support/users/audunmb/)! * [Twenty Twenty Four](https://github.com/WordPress/twentytwentyfour) is [adding a block style variation to `post-terms` named “pill”](https://github.com/WordPress/twentytwentyfour/blob/df92472089ede6fae5924c124a93c843b84e8cbd/functions.php#L47) with the appearance of a button. * ```wp-block-code register_block_style( 'core/post-terms', array( 'name' => 'pill', 'label' => __( 'Pill', 'twentytwentyfour' ), /* * Styles variation for post terms * https://github.com/WordPress/gutenberg/issues/24956 */ 'inline_style' => ' .is-style-pill a, .is-style-pill span:not([class], [data-rich-text-placeholder]) { display: inline-block; background-color: var(--wp--preset--color--base-2); padding: 0.375rem 0.875rem; border-radius: var(--wp--preset--spacing--20); } .is-style-pill a:hover { background-color: var(--wp--preset--color--contrast-3); }', ) ); ``` * You can use this code as a reference to create your own block style variation. * You can also create a child theme of [Twenty Twenty Four](https://github.com/WordPress/twentytwentyfour) and fine-tune this style variation from the `theme.json` of the child theme by doing something like: * ```wp-block-code { "$schema": "https://schemas.wp.org/trunk/theme.json", "version": 2, "styles": { "blocks": { "core/post-terms": { "variations": { "pill": { "border": { "color": "var( --wp--preset--color--black )", "radius": "0", "style": "solid", "width": "3px" }, } } } } } } ``` * The following resources can be useful as a reference: - [Customizing core block style variations via theme.json](https://developer.wordpress.org/news/2023/05/26/customizing-core-block-style-variations-via-theme-json/) | Developer Blog - [Creating custom block styles in WordPress themes](https://developer.wordpress.org/news/2023/02/03/creating-custom-block-styles-in-wordpress-themes/) | Developer Blog - [Block Style Variations](https://developer.wordpress.org/themes/features/block-style-variations/) and [Block Stylesheets](https://developer.wordpress.org/themes/features/block-stylesheets/) | [Theme Handbook](https://developer.wordpress.org/themes/) - [`styles` property of `theme.json`](https://developer.wordpress.org/themes/global-settings-and-styles/styles/) | [Theme Handbook](https://developer.wordpress.org/themes/) * - This reply was modified 2 years, 4 months ago by [JuanMa Garrido](https://wordpress.org/support/users/juanmaguitar/). * Thread Starter [audunmb](https://wordpress.org/support/users/audunmb/) * (@audunmb) * [2 years, 4 months ago](https://wordpress.org/support/topic/styling-post_terms-block/#post-17353874) * These block-styles are added with php, while I added them with javascript. PHP custom styles [only works with inline styles](https://github.com/WordPress/gutenberg/issues/27244), so I use javascript registration. * All my other custom block styles work, it’s just the one for post_terms that won’t work. Is there a bug which prevents javascript from adding custom styles to post_terms? * AFAIK your theme.json code won’t work, as “pill” is a block style, not a block variation. * [Justin Tadlock](https://wordpress.org/support/users/greenshady/) * (@greenshady) * [2 years, 4 months ago](https://wordpress.org/support/topic/styling-post_terms-block/#post-17354312) * It’s not currently possible to style custom block style variations via `theme. json`. You can do this for core-registered variations but not your own. So that option is out, at least until it’s supported. [See this section in the docs](https://developer.wordpress.org/themes/features/block-style-variations/#customizing-block-styles-via-theme-json) for details. * Note: the term `variations` in `theme.json` refers to block style variations ( i.e., block styles). It doesn’t refer to block variations. * The JavaScript you posted looks fine, but there’s not enough information available for us to help debug the issue. If you can post the entirety of your code related to this (your enqueue code, the hook used, etc.) or link to a repo with your theme, it’d help to figure it out. It should work if you follow [the code examples here](https://developer.wordpress.org/themes/features/block-style-variations/#javascript-based-block-styles). It’s 100% possible to register block style variations for the Post Terms block( I have a few in the theme I’m working on). * If you don’t want to [use PHP to register block styles](https://developer.wordpress.org/themes/features/block-style-variations/#php-based-block-styles), then you’ll need to add your custom styling via a stylesheet that is loaded in both the editor and front end. I recommend doing this with a [block stylesheet](https://developer.wordpress.org/themes/features/block-stylesheets/) once you get to the bottom of the registration issue. * Thread Starter [audunmb](https://wordpress.org/support/users/audunmb/) * (@audunmb) * [2 years, 4 months ago](https://wordpress.org/support/topic/styling-post_terms-block/#post-17354469) * > Note: the term `variations` in `theme.json` refers to block style variations( > i.e., block styles). It doesn’t refer to block variations. * That’s confusing, but ok. Explains why that approach doesn’t work. * Still: is there a way to add styling only to tags and not other post_terms? With theme.json? * As for the block styles, it now suddenly works. I don’t know what was wrong or why it now works, but it may have been a small error in the code somewhere. I’m adding block styles with a plugin, the basic code (enquing etc) is on my [GitHub](https://github.com/audunmb/gutenberg-block-styles). * [Justin Tadlock](https://wordpress.org/support/users/greenshady/) * (@greenshady) * [2 years, 4 months ago](https://wordpress.org/support/topic/styling-post_terms-block/#post-17355255) * > Still: is there a way to add styling only to tags and not other post_terms? > With theme.json? * Yes, you can use the `css` property for the block: [https://developer.wordpress.org/themes/global-settings-and-styles/styles/styles-reference/#css](https://developer.wordpress.org/themes/global-settings-and-styles/styles/styles-reference/#css) * When using tags, it will have a class of `.taxonomy-post_tag`, so you can specifically target it. * Thread Starter [audunmb](https://wordpress.org/support/users/audunmb/) * (@audunmb) * [2 years, 4 months ago](https://wordpress.org/support/topic/styling-post_terms-block/#post-17355301) * Thanks. That is of course an option, but if I’m writing CSS anyways it’s better to use actual CSS outside of the json file as that is less error-prone. One missing comma and nothing works with the theme.json file. Of course that’s just my preference. Viewing 6 replies - 1 through 6 (of 6 total) The topic ‘Styling post_terms block’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/twentytwentythree/1.6/screenshot. png) * Twenty Twenty-Three * [Support Threads](https://wordpress.org/support/theme/twentytwentythree/) * [Active Topics](https://wordpress.org/support/theme/twentytwentythree/active/) * [Unresolved Topics](https://wordpress.org/support/theme/twentytwentythree/unresolved/) * [Reviews](https://wordpress.org/support/theme/twentytwentythree/reviews/) * 7 replies * 3 participants * Last reply from: [audunmb](https://wordpress.org/support/users/audunmb/) * Last activity: [2 years, 4 months ago](https://wordpress.org/support/topic/styling-post_terms-block/#post-17355301) * Status: resolved