PHPackages                             24hr/rawb-page-builder-base - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. 24hr/rawb-page-builder-base

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

24hr/rawb-page-builder-base
===========================

The page builder base plugin

v1.1.1(3y ago)04232[2 PRs](https://github.com/24hr-malmo/rawb-page-builder-base/pulls)JavaScript

Since Oct 20Pushed 3y ago3 watchersCompare

[ Source](https://github.com/24hr-malmo/rawb-page-builder-base)[ Packagist](https://packagist.org/packages/24hr/rawb-page-builder-base)[ RSS](/packages/24hr-rawb-page-builder-base/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)DependenciesVersions (10)Used By (0)

RAWB Wordpress Page Builder Base plugin
=======================================

[](#rawb-wordpress-page-builder-base-plugin)

This plugin provides two things:

1. A Section block
2. A Column block

The blocks are the base of all our page builder projects in wordpress and have the basic settings normaly needed. The settings can be truned on or offf by extending and overriding a `features` attribute.

### Section

[](#section)

The sections has the following features active by default

- background
- verticalAlignment
- width
- verticalPadding
- background.image
- background.color

They can be turned off like this:

```
// Register the new settings
addFilter( 'blocks.registerBlockType', 'next24hr/compontents', settings => {
    if (settings.name !== 'next24hr/section') {
        return settings;
    }
	if( typeof settings.attributes !== 'undefined' ){
        settings.attributes = Object.assign( settings.attributes, {
            // Add the features you want to use in the array
			features: { type: 'array', default: [
                'background',
                'verticalAlignment',
                'width',
                'verticalPadding',
                'background.image',
            ] },
		});
	}
	return settings;
});
```

#### Column layouts

[](#column-layouts)

The secion comes pre-loaded with some common column splits. If you wish to add more, you can do it like so:

```
const template = {
    // gutenberg editor css
    style: 'minmax(min-content, 1fr) minmax(min-content, 4fr) minmax(min-content, 1fr)',
    title: __( 'Three columns; wider center column' ),
    icon: ,
    template:[
        [ "next24hr/column", { "width": "1/6" } ],
        [ "next24hr/column", { "width": "2/3" } ],
        [ "next24hr/column", { "width": "1/6" } ]
    ],
};

// when you extend the gutenberg block:

```

You can also disable these default templates by their slug name (except the single column template), like so:

```
// when you extend the gutenberg block:

/**
 * Defaults:
 *
 * twoColumnsEqual
 * twoColumnsOneAndTwoThirds
 * twoColumnsTwoAndOneThirds
 * threeColumnsEqual
 * threeColumnsWideCenter
 * fourColumnsEqual
 */
```

### Column

[](#column)

As in the section, the column has a set of features that can be turned on or off:

- direction
- aligment

They can be turned of in the same way as a section (in this example we turned of `direction`):

```
// Register the new settings
addFilter( 'blocks.registerBlockType', 'next24hr/compontents', settings => {
	if (settings.name !== 'next24hr/column') {
		return settings;
    }
	if( typeof settings.attributes !== 'undefined' ){
        settings.attributes = Object.assign( settings.attributes, {
            // Add the features you want to use in the array.
			features: { type: 'string', default: ['aligment'] },
		});
	}
	return settings;
});
```

Blocking (disabling) blocks inside a column
===========================================

[](#blocking-disabling-blocks-inside-a-column)

If you want certain blocks to be disabled in a column, you can change an attribute called `blockedBlocks` like this:

```
// Register the new settings
addFilter( 'blocks.registerBlockType', 'next24hr/compontents', settings => {
	if (settings.name !== 'next24hr/column') {
		return settings;
    }
	if( typeof settings.attributes !== 'undefined' ){
        settings.attributes = Object.assign( settings.attributes, {
			blockedBlocks: { type: 'array', default: ['mysupercoolblock'] },
		});
	}
	return settings;
});
```

```

## How to develop

This is base on Create Gutenberg Block

### 👉  `npm start`
- Use to compile and run the block in development mode.
- Watches for any changes and reports back any errors in your code.

### If you're pushing to master branch you can just push and github will build the js files for you. Otherwise you'll need to build them running the command below:
#### 👉  `npm run build`
- Use to build production code for your block inside `dist` folder.
- Runs once and reports back the gzip file sizes of the produced code.

```

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity17

Limited adoption so far

Community15

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 54.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~14 days

Recently: every ~21 days

Total

7

Last Release

1212d ago

Major Versions

v0.9.9 → v1.0.02022-10-21

### Community

Maintainers

![](https://www.gravatar.com/avatar/f965b5d32ad195052db1cfb9201be79e11b3c59dba9edc7cee829251744e756c?d=identicon)[24hrservices](/maintainers/24hrservices)

---

Top Contributors

[![camme](https://avatars.githubusercontent.com/u/585242?v=4)](https://github.com/camme "camme (25 commits)")[![AlexanderNilsson-](https://avatars.githubusercontent.com/u/5989513?v=4)](https://github.com/AlexanderNilsson- "AlexanderNilsson- (10 commits)")[![cchaglund](https://avatars.githubusercontent.com/u/40951536?v=4)](https://github.com/cchaglund "cchaglund (6 commits)")[![richardsweeney](https://avatars.githubusercontent.com/u/761071?v=4)](https://github.com/richardsweeney "richardsweeney (4 commits)")[![Gimpan](https://avatars.githubusercontent.com/u/22836929?v=4)](https://github.com/Gimpan "Gimpan (1 commits)")

### Embed Badge

![Health badge](/badges/24hr-rawb-page-builder-base/health.svg)

```
[![Health](https://phpackages.com/badges/24hr-rawb-page-builder-base/health.svg)](https://phpackages.com/packages/24hr-rawb-page-builder-base)
```

###  Alternatives

[nebkam/symfony-traits

Helper trait to ease writing APIs in Symfony

156.7k](/packages/nebkam-symfony-traits)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)