Resource Layout Blocks

Resource Branding
Layout blocks for WordPress

Custom layout blocks for the WordPress block editor.
Container, Row, and Column.
Uses CSS and utility classes from Twitter Bootstrap 5.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
3. Features
4. Roadmap
5. Contact

Layout Blocks

Custom layout blocks for the WordPress block editor. Container, Row, and Column. Uses CSS and utility classes from Twitter Bootstrap 5.

(back to top)

Built With

• React.js
• Bootstrap

(back to top)

Getting Started

WordPress plugin – install and activate.

Prerequisites

Requires PHP >= 7.0. Requires WordPress >= 5.9.

Features

Blocks have an 'inlineStyle' attribute. This attribute is editable in the side panel, under the Advanced accordion - ' Inline Styles'. Must be a valid string of inline CSS. Be aware that as some native WordPress attributes (like 'align' and 'alignWide') are dependent on inline CSS, these attributes are not compatible with these blocks.

A 'Class Inspector' area is added to the Block Control Toolbar. This dynamically lists all the CSS classes added to the block during creation and editing. It provides a concise, quick way of telling exactly what classes are added throughout all breakpoints, including any custom CSS classes added in the Advanced sidebar.

(back to top)

Roadmap

• [X] Add Controls for creating & editing inline style per block.

• [X] Block for layout purposes only: placeholder, grouping for alignment & justify, width 100%, to break column, etc.

• [ ] Setting to enable Bootstrap or Tailwind classes.

• [ ] Enable CSS class editing from within the Class Inspector. (would be nice, but with the current block editor, probably not possible)

See the open issues for a full list of proposed features ( and known issues).

(back to top)

Contact

Erik Rühling - erik@resourceatlanta.com

Project Link: https://github.com/ecruhling/resource-layout-blocks

(back to top)