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.

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
    ]
  },
  "layout": {
    "type": "object"
  },
  "anchor": {
    "type": "string",
    "source": "attribute",
    "attribute": "id",
    "selector": "*"
  }
}

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,
    "__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
    }
  }
}

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.