Columns

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

This block is available in the latest version of WordPress and does not require the Gutenberg plugin.

Last updated

April 20, 2024

Category: Design

Block variations: One column. Two columns; one-third, two-thirds split. Two columns; two-thirds, one-third split. Three columns; equal split. Three columns; wide center column.

For developers

View source on GitHub

Block Grammar & Markup

<!-- 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 -->

Block Attributes

Optional. Type: Object.

Attributes provide the structured data needs of a block. They can exist in different forms when they are serialized, but they are declared together under a common interface.

Documentation

{
  "verticalAlignment": {
    "type": "string"
  },
  "isStackedOnMobile": {
    "type": "boolean",
    "default": true
  },
  "templateLock": {
    "type": [
      "string",
      "boolean"
    ],
    "enum": [
      "all",
      "insert",
      "contentOnly",
      false
    ]
  }
}

Block Supports

Optional. Type: Object.

A set of options that enables or disables block controls in the editor, for example gradient colors or padding.

Documentation

{
  "anchor": true,
  "align": [
    "wide",
    "full"
  ],
  "html": false,
  "color": {
    "gradients": true,
    "link": true,
    "heading": true,
    "button": true,
    "__experimentalDefaultControls": {
      "background": true,
      "text": true
    }
  },
  "spacing": {
    "blockGap": {
      "__experimentalDefault": "2em",
      "sides": [
        "horizontal",
        "vertical"
      ]
    },
    "margin": [
      "top",
      "bottom"
    ],
    "padding": true,
    "__experimentalDefaultControls": {
      "padding": true,
      "blockGap": true
    }
  },
  "layout": {
    "allowSwitching": false,
    "allowInheriting": false,
    "allowEditing": false,
    "default": {
      "type": "flex",
      "flexWrap": "nowrap"
    }
  },
  "__experimentalBorder": {
    "color": true,
    "radius": true,
    "style": true,
    "width": true,
    "__experimentalDefaultControls": {
      "color": true,
      "radius": true,
      "style": true,
      "width": true
    }
  },
  "typography": {
    "fontSize": true,
    "lineHeight": true,
    "__experimentalFontFamily": true,
    "__experimentalFontWeight": true,
    "__experimentalFontStyle": true,
    "__experimentalTextTransform": true,
    "__experimentalTextDecoration": true,
    "__experimentalLetterSpacing": true,
    "__experimentalDefaultControls": {
      "fontSize": true
    }
  },
  "interactivity": {
    "clientNavigation": true
  },
  "shadow": true
}

Transforms

Optional. Type: Object.

Transforms provide rules for what a block can be transformed from and what it can be transformed to.

Documentation

Transforms from: Any. Media text.

View blocks per attribute or block support:

Block Attributes