{"id":13759349,"url":"https://github.com/greenpeace/planet4-plugin-gutenberg-blocks","last_synced_at":"2025-05-10T09:32:27.608Z","repository":{"id":35011810,"uuid":"196357997","full_name":"greenpeace/planet4-plugin-gutenberg-blocks","owner":"greenpeace","description":"WordPress plugin that includes the Gutenberg blocks for the Greenpeace Planet 4 project","archived":true,"fork":false,"pushed_at":"2025-03-17T08:05:13.000Z","size":15700,"stargazers_count":51,"open_issues_count":0,"forks_count":20,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-10T22:41:46.548Z","etag":null,"topics":["greenpeace","php","sass","twig","wordpress","wordpress-gutenberg","wordpress-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/greenpeace.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-11T08:59:09.000Z","updated_at":"2025-04-04T14:18:07.000Z","dependencies_parsed_at":"2023-01-16T23:01:09.735Z","dependency_job_id":"5ce2cf3d-d431-4a4f-a312-407bde433c74","html_url":"https://github.com/greenpeace/planet4-plugin-gutenberg-blocks","commit_stats":{"total_commits":1820,"total_committers":36,"mean_commits":50.55555555555556,"dds":0.7604395604395604,"last_synced_commit":"33d59573560906775c3192fd5390d9f7c4af12ce"},"previous_names":[],"tags_count":265,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenpeace%2Fplanet4-plugin-gutenberg-blocks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenpeace%2Fplanet4-plugin-gutenberg-blocks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenpeace%2Fplanet4-plugin-gutenberg-blocks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/greenpeace%2Fplanet4-plugin-gutenberg-blocks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/greenpeace","download_url":"https://codeload.github.com/greenpeace/planet4-plugin-gutenberg-blocks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253397070,"owners_count":21901990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["greenpeace","php","sass","twig","wordpress","wordpress-gutenberg","wordpress-plugin"],"created_at":"2024-08-03T13:00:51.259Z","updated_at":"2025-05-10T09:32:25.454Z","avatar_url":"https://github.com/greenpeace.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Greenpeace Planet 4 Gutenberg Blocks Plugin\n\n![Planet 4](./planet4.png)\n\n## What is it?\n\nThis the WordPress Gutenberg blocks plugin for Greenpeace Planet 4 project.\nYou can learn more about this project on [the Planet 4 blog](https://medium.com/planet4).\n\n## Contribute\n\nThe 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.\n\n## How to use this plugin in Planet 4\n\nYou can use the plugin in WordPress directly, by including it in your `composer.json` file:\n```\n\"require\": {\n    ...\n    \"greenpeace/planet4-plugingutenberg-plugin\" : \"X.X.X\",\n    ...\n},\n```\n\n## Assets build\n\nYou'll need npm to install the dependencies, just run  `npm install`  to install them.\n\nTo develop:\n\n- run `npm start` to start a watcher that will rebuild every time you make a change.\n- run `npm run build` to manually build the files.\n\n## Build Setup\n\nWordPress provides a single dependency for the whole build setup including:\n\n* Babel: the transpiler for JSX \u0026 ES6 syntax to browser-compatible JS\n* Webpack: the bundler for all the JS modules and dependency resolution\n\n## How to develop a new block you ask?\n\n1. 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.\n\n1. 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.\n\n1. 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\nyou 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.\n\n1. Add your new class name to the array inside Loader's ( `P4GBKS\\Loader` ) constructor.\n\n1. 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**.\n\n\t **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.\n `edit()` function should return a react component that will be used for rendering the block in the editor.\n`save()` function should return null as we use server-side rendering currently.\n\n\t**Blockname.js** should be a class that defines a React component that implements `renderEdit()` and `renderView()`.\n`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.\n\n\tTo learn more details about the rendering logic, refer to the [blocks page in Planet 4 Gitbook](https://support.greenpeace.org/planet4/tech/blocks).\n\n1. Create a new sccs file inside _react-blocks/src/blocks/styles_ named after your block **Blockname.scss** to use for block's frontend styling.\n\n    Create a new file named **BlocknameEditor.scss** to use for block's editor styling if you need to style the block in the editor.\n\n1. 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreenpeace%2Fplanet4-plugin-gutenberg-blocks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgreenpeace%2Fplanet4-plugin-gutenberg-blocks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgreenpeace%2Fplanet4-plugin-gutenberg-blocks/lists"}