Wordpress Question posted in
The official Wordpress documentation can be found here.

How to style wordpress core/list with theme.json?

I try since a while to style the ordinary list block with wordpress theme.json.

   "blocks": {
        "core/list": {
            "color": {
                "text": "red"
            }
        },
        "core/list-item": {
            "style": "disc",
            "indent": "2em",
            "spacing": "5px"
        }
    },

while the core/list item takes the color "red" as expected, I can’t get further styles to the <li> items.
Is there something I’m missing or does theme.json really doesn’t support that?

Thanks for any help!

Tags:

2

Answers


  1. 0

    I suggest always referring to the theme.json schema. You can find it at https://raw.githubusercontent.com/WordPress/gutenberg/trunk/schemas/json/theme.json.

    Analyzing the schema, you will see that some styles/options/values are expressed slightly differently.

    For example, this is how you would set some of them:

    "core/list": {
    "typography": {
        "fontSize": "var(--wp--preset--font-size--size-20)"
    }
},
"core/list-item": {
    "typography": {
        "fontSize": "var(--wp--preset--font-size--size-32)"
    },
    "spacing": {
        "margin": {
            "bottom": "1.5rem"
        }
    },
    "border": {
        "width": "1px",
        "style": "solid",
        "color": "var(--wp--preset--color--sunset-red)"
    }
}

    That said, some options are not available. For example, I couldn’t find a way to set the disc style. It should be possible to add custom CSS rules but I couldn’t figure out how to apply the list-style-type:disc rule.

    Also, I suggest you set the "schema" property at the top of the theme.json file. This way, the editor you are using will be able to suggest the available properties as you write them. You can set the schema in this way:

    "$schema": "https://schemas.wp.org/trunk/theme.json"

    Take a look at https://fullsiteediting.com for other handy information about how to set up theme.json.

    Login or Signup to reply.
  2. 0

    Alternatively to setting the styles within the theme.json settings, you can add your own inline styles with the wp_enqueue_block_style() function. This function will load your custom CSS whenever the block is appended to the current page.

    At the time of writing the amount of control you get from the theme.json file is limited. This allows you full control over the styles.

    /* wp-block-list.css */

.wp-block-list {
  list-style: disc; 
}

    <?php

/* functions.php */

add_action('init', function () {
  wp_enqueue_block_style('core/list', array(
    'handle'   => 'custom-list-styles',
    'src'      => get_theme_file_uri('styles/wp-block-list.css'),
    'path'     => get_theme_file_path('styles/wp-block-list.css'),
  ));
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search