WP Container Block editor
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.editorconfig
.eslintignore
.eslintrc.json
.gitignore
README.md
editor.png
examples.png
front.png
nano.save fix columns flex CSS Aug 19, 2018
package-lock.json
package.json
plugin.php first commit yalaah Aug 17, 2018
structure.png

README.md

👉 WordPress Editor block

"Columns" core block fork, a "Container" block with some options to build layouts :

  • Columns structure
  • Spacing (paddings)
  • Backgrounds :
    • Image (size, position, repeat)
    • Color

⚠️ Please note this block is still in development, that's mean it could be broken frequently !

Known issues :

  • It's not easy to focus the container block and access options. This block is based on "Columns" core block, which is itself not easy to use. Tip : focus the inner "Column" block and go up to the parent Container with the up arrow key.

Screenshots

Editor view:

Editor view

Front view :

Front view

Columns structures availables :

Possibles structures

Inner containers :

Inner containers

This project was bootstrapped with Create Guten Block.

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

You can find the most recent version of this guide here.

👉 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

  • 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

  • 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.

Feel free to tweet and say 👋 at me @MrAhmadAwais

npm npm license Tweet for help GitHub stars GitHub followers