FAIR

Federated and Independent Repositories

Grid Block

Plugin Banner

Grid Block

by digitalapps

Download
Description

Grid Block adds a lightweight grid container and nested column block to the WordPress editor. Choose a starting layout, place any blocks inside each column, and adjust column widths for desktop, laptop, tablet, and mobile breakpoints.

Select the Grid Block and open Grid gap in its settings to adjust the column and row spacing independently. Use px, rem, or em units, set either gap to zero, or reset to the original 30px column gutter and 0px row gap. Row spacing also applies when columns stack on smaller screens.

The frontend uses a small local stylesheet and no JavaScript. The plugin does not create options, collect personal data, or contact external services.

Existing content created with Grid Block 1.0.x remains supported. The original grid-block/grid and grid-block/grid-column block names and frontend class names are preserved.

Development

Human-readable block source is included in the src directory.

  1. Run npm ci to install the exact JavaScript build tools from the included lockfile.
  2. Run npm run build to create production assets in build.

The build requires Node.js 20 or newer and npm 10 or newer. Build tools are development dependencies and are not loaded by WordPress.

  1. Install Grid Block from the WordPress plugin directory, or upload the grid-block directory to /wp-content/plugins/.
  2. Activate Grid Block from the Plugins screen.
  3. Add the Grid Block from the Design category in the block inserter.
  1. Choose a starting grid layout.

    Choose a starting grid layout.

  2. Build a three-column layout with nested blocks and adjust the grid gaps.

    Build a three-column layout with nested blocks and adjust the grid gaps.

  3. Adjust a column width for each responsive breakpoint.

    Adjust a column width for each responsive breakpoint.

Does Grid Block load JavaScript on the frontend?

No. Grid Block loads only its layout stylesheet on pages where the block is used.

Will existing Grid Block content keep working?

Yes. Version 1.2.0 preserves the existing block names and public CSS classes. Deprecated serializers keep content from versions 1.0.x and 1.1.x editable while native alignment and anchor properties are applied on save.

Does the plugin use an external service?

No. Grid Block does not make external requests or collect telemetry.

1.2.1

  • Fixed gap fields restoring their defaults while values are being typed. Values now commit on blur or Enter.
  • Made newly added columns stack on mobile while preserving existing column settings.
  • Made the initial layout picker respect insertion locks inherited from parent blocks.

1.2.0

  • Updated the editor integration for WordPress 7.1, including its iframe editor.
  • Added independent column and row gap controls, with zero spacing, px/rem/em units, and reset.
  • Separated the Add column row from content inserters to prevent overlapping controls.
  • Preserved wide/full alignment and HTML anchors when saving older content.
  • Fixed mobile stacking for auto columns and responsive auto width overrides.
  • Enabled adding columns within grids and improved horizontal block movement.
  • Modernized block registration and conditional asset loading, with WordPress 6.6 and 6.7 compatibility.
  • Fixed responsive size inheritance and translated width labels.
  • Improved layout-picker and inspector-control accessibility.
  • Preserved Grid Block 1.0.x block names and saved-content compatibility.

1.0.6

  • Added vertical alignment support.

1.0.5

  • Fixed full-width alignment styling.

1.0.4

  • Added horizontal column alignment.

1.0.3

  • Removed the fixed container width.

1.0.2

  • Removed frontend JavaScript.

1.0.0

  • Initial release.
Back to top