functions.php

/**
 * Register a native Pill Links style variation for the Categories block.
 */
function custom_register_category_pill_style() {
    register_block_style(
        'core/categories',
        array(
            'name'  => 'pill-links',
            'label' => __('Pill Links', 'design-garden'),
        )
    );
}
add_action('init', 'custom_register_category_pill_style');

style.css

/* ==========================================================================
   Category Navigation Pills (Dynamic Variables)
   ========================================================================== */

/* 1. Target the exact HTML wrapper you found */
ul.wp-block-categories-list.is-style-pill-links {
    list-style-type: none !important;
    padding-left: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0;
}

/* 2. Target the individual inner category items */
ul.wp-block-categories-list.is-style-pill-links li {
    margin: 0 !important;
    padding: 0 !important;
    list-style-image: none !important; /* Forces editor bullet icons to vanish */
}

/* 3. Style the interactive links into perfect pill shapes */
ul.wp-block-categories-list.is-style-pill-links li a {
    display: inline-block;
    border: 1px solid var(--wp--preset--color--primary);
    color: var(--wp--preset--color--primary);
    background-color: var(--wp--preset--color--background);
    border-radius: 9999px;
    padding: 0.35rem 1rem;
    text-decoration: none !important;
    font-size: var(--wp--preset--font-size--small);
    transition: all 0.2s ease-in-out;
}

/* 4. Interactive hover transition */
ul.wp-block-categories-list.is-style-pill-links li a:hover {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--background) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   Active / Current Category Pill Styles
   ========================================================================== */

/* 1. Force the active link item to stay filled with your primary color */
.is-style-pill-links li.current-cat a,
.is-style-pill-links li.current-cat a:link,
.is-style-pill-links li.current-cat a:visited {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--background) !important;
    border-color: var(--wp--preset--color--primary) !important;
    font-weight: 600; 
    cursor: default; 
}

/* 2. Soften the hover response on the already active item */
.is-style-pill-links li.current-cat a:hover {
    background-color: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--background) !important;
    transform: none !important; 
}