Skip to content

Correct theme.json for table default border #30

@bobbingwide

Description

@bobbingwide

In 0750959 I added an attempt to style the table border
by adding a core/table element to styles

"core/button": {
        "border": {
          "radius": "5px"
        },
       "core/table": {
          "border": {
            "color": "green",
            "width": "2px",
            "style": "dashed"
          }
       }
      }
    }

It didn't work but I didn't know why not.
The theme.json file passed the JSON lint test, but it didn't produce the correct results.

The problem was not syntax but semantics. All the brackets are there, they’re just in the wrong order.
The structure was incorrect.

Instead of being the following elements:

  • blocks.core/button.border.radius
  • blocks.core/table.border.color and .width and .style

we get

  • blocks.core/button.border.radius
  • blocks.core/button.core/table.border.color and .width and .style

The fix is to move one of the close curly braces to after core/button.border.radius.

Without any tooling this is going to be one of the harder problems to debug.
I imagine there'll be many similar problems with people attempting to use the wrong CSS variable names
in both stylesheets such as style.css and in the styles element.

eg --wp--preset--color--link or --wp--preset--font-family--opensans

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions