PHPackages                             raffaelj/wordpress-rlj-blocks - 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. raffaelj/wordpress-rlj-blocks

ActiveWordpress-plugin

raffaelj/wordpress-rlj-blocks
=============================

Gutenberg blocks: Section (a simple div), Video link; Gutenberg extensions: image titles

0.2.3(5y ago)05MITJavaScript

Since Aug 9Pushed 5y ago1 watchersCompare

[ Source](https://github.com/raffaelj/wordpress_rlj-blocks)[ Packagist](https://packagist.org/packages/raffaelj/wordpress-rlj-blocks)[ Docs](https://github.com/raffaelj/wordpress_rlj-blocks)[ RSS](/packages/raffaelj-wordpress-rlj-blocks/feed)WikiDiscussions master Synced 4w ago

READMEChangelogDependencies (1)Versions (5)Used By (0)

rlj-blocks
==========

[](#rlj-blocks)

Experimental WordPress Plugin to provide a wrapper block with a background image, a video link block and an extension for image titles

I called the block "Section". It is only a wrapper block, that contains other blocks, but with the ability to add a background image. It adds a handful of classes and adds one style attribute if the section has a background image.

The CSS will not load automatically in the frontend. You have to add your own custom styles. It's a bad design decision, to run tons of requests just to add 10 lines of css for each plugin. I use it with a child theme of Twentynineteen.

The video link block requires the unreleased and legacy addon rlj-wp-utils or the experimental plugin WPMultiplane. I'll fix that later...

The image title extensions are experimental.

Installation
------------

[](#installation)

Copy all files of this repository into `/wp-content/plugins/rlj-blocks`.

I don't know, how to add a plugin to the official WordPress plugins, yet.

Notes
-----

[](#notes)

If you use the new, fancy Gutenberg features, Wordpress will try to load a Webfont from Google. They still default to kick their users privacy straight into the ass. So dont't forget to install [Disable Google Fonts](https://wordpress.org/plugins/disable-google-fonts/).

Custom CSS
----------

[](#custom-css)

Add this code to your child theme or copy it to "Additional CSS" of your Customizer.

```
.has-background {
  background-size: cover;
  background-position: 50%;
  height: 100%; }

.has-parallax {
  background-attachment: fixed; }

.is-style-rounded {
  border-radius: 2px; }

.is-style-shadow {
  -webkit-box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.2); }

.is-style-shadow-rounded {
  border-radius: 2px;
  -webkit-box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.2); }
```

Trivia
------

[](#trivia)

I started to discover the new Gutenberg blocks from WordPress and I missed one very important feature: A simple `` with background images. I tried multiple plugins, but all of them

- had too much useless features,
- added jQuery and didn't work without Javascript,
- were buggy here and there
- ...

After reading and testing multiple tutorials to build custem Gutenberg blocks, I discovered [Create Guten Block](https://github.com/ahmadawais/create-guten-block). I should have used this in the first place. Without any knowledge about Gutenberg, React or ESNext, I was able to built this plugin with a lot of trials and errors, but now it works.

Built with Create Guten Block
-----------------------------

[](#built-with-create-guten-block)

This project was bootstrapped with [Create Guten Block](https://github.com/ahmadawais/create-guten-block) ([@MrAhmadAwais](https://twitter.com/mrahmadawais/).

Below you will find some information on how to run scripts.

> You can find the most recent version of this guide [here](https://github.com/ahmadawais/create-guten-block).

### `npm start`

[](#npm-start)

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

### `npm run build`

[](#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.

### `npm run eject`

[](#npm-run-eject)

- Use to eject your plugin out of `create-guten-block`.
- Provides all the configurations so you can customize the project as you want.
- It's a one-way street, `eject` and you have to maintain everything yourself.
- You don't normally have to `eject` a project because by ejecting you lose the connection with `create-guten-block` and from there onwards you have to update and maintain all the dependencies on your own.

###  Health Score

21

—

LowBetter than 19% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity4

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity47

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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 ~67 days

Total

4

Last Release

1897d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/ef4edcadbb34e2b59a6e5320ea13b3e53b8c9d3ba08f4387f479f11cfa7d950b?d=identicon)[raffaelj](/maintainers/raffaelj)

---

Top Contributors

[![raffaelj](https://avatars.githubusercontent.com/u/13042193?v=4)](https://github.com/raffaelj "raffaelj (36 commits)")

---

Tags

pluginwordpressgutenbergwrapper diva simple divvideo thumbnail download

### Embed Badge

![Health badge](/badges/raffaelj-wordpress-rlj-blocks/health.svg)

```
[![Health](https://phpackages.com/badges/raffaelj-wordpress-rlj-blocks/health.svg)](https://phpackages.com/packages/raffaelj-wordpress-rlj-blocks)
```

###  Alternatives

[10up/elasticpress

Supercharge WordPress with Elasticsearch.

1.3k374.3k6](/packages/10up-elasticpress)[sybrew/the-seo-framework

An automated, advanced, accessible, unbranded and extremely fast SEO solution for any WordPress website.

47078.8k](/packages/sybrew-the-seo-framework)[infinum/eightshift-libs

WordPress libs developed by Eightshift team to use in modern WordPress.

63118.9k3](/packages/infinum-eightshift-libs)[iceicetimmy/acf-post-type-selector

Post type selector for Advanced Custom Fields.

559.0k](/packages/iceicetimmy-acf-post-type-selector)[davidwebca/custom-editor-sidebar-width

WordPress plugin to allow users to set their desired Gutenberg sidebar width.

111.2k](/packages/davidwebca-custom-editor-sidebar-width)

PHPackages © 2026

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