PHPackages greenpeace/planet4-plugin-gutenberg-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. [Templating & Views](/categories/templating) 4. / 5. greenpeace/planet4-plugin-gutenberg-blocks AbandonedArchivedWordpress-plugin[Templating & Views](/categories/templating) greenpeace/planet4-plugin-gutenberg-blocks ========================================== This repository contains the WordPress plugin that provides the gutenberg blocks for Planet4 project v1.110.0(1y ago)4979.2k↓100%20GPL-3.0+JavaScriptCI passing Since Nov 5Pushed 1y ago7 watchersCompare [ Source](https://github.com/greenpeace/planet4-plugin-gutenberg-blocks)[ Packagist](https://packagist.org/packages/greenpeace/planet4-plugin-gutenberg-blocks)[ RSS](/packages/greenpeace-planet4-plugin-gutenberg-blocks/feed)WikiDiscussions main Synced 2mo ago READMEChangelog (10)Dependencies (5)Versions (273)Used By (0) Greenpeace Planet 4 Gutenberg Blocks Plugin =========================================== [](#greenpeace-planet-4-gutenberg-blocks-plugin) [![Planet 4](./planet4.png)](./planet4.png) What is it? ----------- [](#what-is-it) This the WordPress Gutenberg blocks plugin for Greenpeace Planet 4 project. You can learn more about this project on [the Planet 4 blog](https://medium.com/planet4). Contribute ---------- [](#contribute) The best place to start is from the main [Planet 4 repo](https://github.com/greenpeace/planet4) that contains all the necessary information and tickets to get started. How to use this plugin in Planet 4 ---------------------------------- [](#how-to-use-this-plugin-in-planet-4) You can use the plugin in WordPress directly, by including it in your `composer.json` file: ``` "require": { ... "greenpeace/planet4-plugingutenberg-plugin" : "X.X.X", ... }, ``` Assets build ------------ [](#assets-build) You'll need npm to install the dependencies, just run `npm install` to install them. To develop: - run `npm start` to start a watcher that will rebuild every time you make a change. - run `npm run build` to manually build the files. Build Setup ----------- [](#build-setup) WordPress provides a single dependency for the whole build setup including: - Babel: the transpiler for JSX & ES6 syntax to browser-compatible JS - Webpack: the bundler for all the JS modules and dependency resolution How to develop a new block you ask? ----------------------------------- [](#how-to-develop-a-new-block-you-ask) 1. Create a new class that extends `Base_Block` ( `P4GBKS\Blocks\Base_Block` ) inside directory *classes/blocks*. The class name should follow a naming convention, for example, **Blockname** and its file name should be class-**blockname**.php. 2. Implement its parent's class abstract method. In block's **constructor**, you need to define the block's details (fields, schema) using `register_block_type` and in method **prepare\_data()** you need to prepare the data which will be used for rendering. 3. Create the template file that will be used to render your block inside directory *templates/blocks*. If the name of the file is **blockname**.twig then you need to set the BLOCK\_NAME constant as **'blockname'** It also works with HTML templates. Just add 'php' as the 3rd argument of the block() method. 4. Add your new class name to the array inside Loader's ( `P4GBKS\Loader` ) constructor. 5. Create a new folder inside *react-blocks/src/blocks* named after your block **Blockname** (first letter capital - rest lowercase). Create two new files inside that folder named **Blockname.js** and **BlocknameBlock.js**. **BlocknameBlock.js** should be a class that uses wordpress [registerBlockType](https://developer.wordpress.org/block-editor/developers/block-api/block-registration/) to define the block's attributes, schema and `edit()` function. `edit()` function should return a react component that will be used for rendering the block in the editor. `save()` function should return null as we use server-side rendering currently. **Blockname.js** should be a class that defines a React component that implements `renderEdit()` and `renderView()`. `renderEdit()` should be used to render the block in the editor, to define editor-specific things as sidebar options, in-place edit components, and so on. `renderView()` will be used both in the editor and in the frontend site to render the block's contents, as we are rendering blocks using React in the frontend too. To learn more details about the rendering logic, refer to the [blocks page in Planet 4 Gitbook](https://support.greenpeace.org/planet4/tech/blocks). 6. Create a new sccs file inside *react-blocks/src/blocks/styles* named after your block **Blockname.scss** to use for block's frontend styling. Create a new file named **BlocknameEditor.scss** to use for block's editor styling if you need to style the block in the editor. 7. Finally, before committing do **npm run build** to build the plugin's assets and **vendor/bin/phpcs** to check for any PHP styling errors in your code. ### Health Score 51 — FairBetter than 95% of packages Maintenance46 Moderate activity, may be stable Popularity40 Moderate usage in the ecosystem Community29 Small or concentrated contributor base Maturity77 Established project with proven stability Bus Factor3 3 contributors hold 50%+ of commits 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 ~7 days Recently: every ~0 days Total 272 Last Release 480d ago Major Versions v0.135.2 → v1.0.02022-02-02 ### Community Maintainers ![](https://www.gravatar.com/avatar/73b0188184085e27029f0917c76dbc21e87c206c01909c3e931d53adf0bb3b3c?d=identicon)[sagarsdeshmukh](/maintainers/sagarsdeshmukh) ![](https://www.gravatar.com/avatar/6ca098c89ba45fa17fb96c4c14af87805e0e45890ef02662c7c1d722f93d2a78?d=identicon)[comzeradd](/maintainers/comzeradd) ![](https://www.gravatar.com/avatar/f8e9ebddddcc092c3cd491cef846037244d4854935bc7d3eedd354f140b3bfbe?d=identicon)[planet-4](/maintainers/planet-4) --- Top Contributors [![mleray](https://avatars.githubusercontent.com/u/6949075?v=4)](https://github.com/mleray "mleray (542 commits)")[![Inwerpsel](https://avatars.githubusercontent.com/u/7604138?v=4)](https://github.com/Inwerpsel "Inwerpsel (541 commits)")[![comzeradd](https://avatars.githubusercontent.com/u/939357?v=4)](https://github.com/comzeradd "comzeradd (492 commits)")[![pablocubico](https://avatars.githubusercontent.com/u/340766?v=4)](https://github.com/pablocubico "pablocubico (226 commits)")[![sagarsdeshmukh](https://avatars.githubusercontent.com/u/5357471?v=4)](https://github.com/sagarsdeshmukh "sagarsdeshmukh (205 commits)")[![lithrel](https://avatars.githubusercontent.com/u/617346?v=4)](https://github.com/lithrel "lithrel (200 commits)")[![dpivo](https://avatars.githubusercontent.com/u/48321955?v=4)](https://github.com/dpivo "dpivo (89 commits)")[![GP-Dan-Tovbein](https://avatars.githubusercontent.com/u/77975803?v=4)](https://github.com/GP-Dan-Tovbein "GP-Dan-Tovbein (60 commits)")[![dantovbein](https://avatars.githubusercontent.com/u/2814580?v=4)](https://github.com/dantovbein "dantovbein (45 commits)")[![kirdia](https://avatars.githubusercontent.com/u/15197444?v=4)](https://github.com/kirdia "kirdia (44 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (38 commits)")[![mardelnet](https://avatars.githubusercontent.com/u/59029273?v=4)](https://github.com/mardelnet "mardelnet (23 commits)")[![Osong-Michael](https://avatars.githubusercontent.com/u/38656549?v=4)](https://github.com/Osong-Michael "Osong-Michael (21 commits)")[![galousis](https://avatars.githubusercontent.com/u/577221?v=4)](https://github.com/galousis "galousis (15 commits)")[![planet-4](https://avatars.githubusercontent.com/u/71187640?v=4)](https://github.com/planet-4 "planet-4 (8 commits)")[![oekeur](https://avatars.githubusercontent.com/u/14031077?v=4)](https://github.com/oekeur "oekeur (5 commits)")[![aeisenberg](https://avatars.githubusercontent.com/u/363559?v=4)](https://github.com/aeisenberg "aeisenberg (2 commits)")[![DanceParty](https://avatars.githubusercontent.com/u/10778294?v=4)](https://github.com/DanceParty "DanceParty (2 commits)")[![kritisingh1](https://avatars.githubusercontent.com/u/22004158?v=4)](https://github.com/kritisingh1 "kritisingh1 (1 commits)")[![foppepieters](https://avatars.githubusercontent.com/u/111864161?v=4)](https://github.com/foppepieters "foppepieters (1 commits)") --- Tags greenpeacephpsasstwigwordpresswordpress-gutenbergwordpress-plugin ### Code Quality TestsPHPUnit Code StylePHP\_CodeSniffer ### Embed Badge ![Health badge](/badges/greenpeace-planet4-plugin-gutenberg-blocks/health.svg) ``` [![Health](https://phpackages.com/badges/greenpeace-planet4-plugin-gutenberg-blocks/health.svg)](https://phpackages.com/packages/greenpeace-planet4-plugin-gutenberg-blocks) ``` ### Alternatives [mustache/mustache A Mustache implementation in PHP. 3.3k44.6M291](/packages/mustache-mustache)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova. 8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle Easy integration of twitters bootstrap into symfony2 7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3871.2M](/packages/limenius-react-bundle)[nicmart/string-template StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions. 2101.7M30](/packages/nicmart-string-template) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)