Columns

Display content in multiple columns, with blocks added to each column.

• Name: core/columns
• Category: design
• API Version: 3
• Block Type: Static (saved in post content)

Block Relationships

Allowed inner blocks:
– core/column

Attributes

Defined via the attributes property in block.json.

Supports

Defined via the supports property in block.json.

• anchor: true
• align: "wide", "full"
• html: false
• color:
  • gradients: true
  • link: true
  • heading: true
  • button: true
• spacing:
  • blockGap: {"__experimentalDefault":"2em","sides":["horizontal","vertical"]}
  • margin: ["top","bottom"]
  • padding: true
• layout:
  • allowSwitching: false
  • allowInheriting: false
  • allowEditing: false
  • default: {"type":"flex","flexWrap":"nowrap"}
• typography:
  • fontSize: true
  • lineHeight: true
• interactivity:
  • clientNavigation: true
• shadow: true

Block Markup

This is a static block. The markup is saved directly in the post content.

<!-- wp:columns {"backgroundColor":"secondary"} -->
<div class="wp-block-columns has-background has-secondary-background-color">
    <!-- wp:column -->
    <div class="wp-block-column">
        <!-- wp:paragraph -->
        <p>Column One, Paragraph One</p>
        <!-- /wp:paragraph -->
        <!-- wp:paragraph -->
        <p>Column One, Paragraph Two</p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
    <!-- wp:column -->
    <div class="wp-block-column">
        <!-- wp:paragraph -->
        <p>Column Two, Paragraph One</p>
        <!-- /wp:paragraph -->
        <!-- wp:paragraph -->
        <p>Column Three, Paragraph One</p>
        <!-- /wp:paragraph -->
    </div>
    <!-- /wp:column -->
</div>
<!-- /wp:columns -->

Source

• block.json (reference)
• Source directory — browse edit.js, save.js, index.php, and more.