Download the PHP package greenpeace/planet4-plugin-gutenberg-blocks without Composer
On this page you can find all versions of the php package greenpeace/planet4-plugin-gutenberg-blocks. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download greenpeace/planet4-plugin-gutenberg-blocks
More information about greenpeace/planet4-plugin-gutenberg-blocks
Files in greenpeace/planet4-plugin-gutenberg-blocks
Package planet4-plugin-gutenberg-blocks
Short Description This repository contains the WordPress plugin that provides the gutenberg blocks for Planet4 project
License GPL-3.0+
Informations about the package planet4-plugin-gutenberg-blocks
Greenpeace Planet 4 Gutenberg Blocks Plugin
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.
Contribute
The best place to start is from the main Planet 4 repo that contains all the necessary information and tickets to get started.
How to use this plugin in Planet 4
You can use the plugin in WordPress directly, by including it in your composer.json
file:
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
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?
-
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. -
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. -
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.
-
Add your new class name to the array inside Loader's (
P4GBKS\Loader
) constructor. -
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 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()
andrenderView()
.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.
-
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.
- 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.