Greenpeace P4NL Gutenberg Blocks Plugin

! WorkInProgress

Contents

• Introduction
• Composer
• Code Standards
• Contribute

Introduction

This WordPress plugin provides the necessary blocks to be used with Gutenberg with Twig.

Composer

We use composer as dependency manager for the this plugin. To install dependencies run

$ composer install

Code standards

We follow the WordPress Coding Standards

We use a custom php codesniffer ruleset which adds some rules over WordPress-Core, WordPress-Docs and WordPress-Extra rulesets.

WordPress Coding Standards Rulesets

WordPress Coding Standards Wiki

To run the php codesniffer

$ vendor/bin/phpcs or $ composer sniffs

To run the php code beautifier and fixer

$ vendor/bin/phpcbf or $ composer fixes

Contribute

Please read the Contribution Guidelines for Planet4.

Commit guidelines

Included is a githook (commit-msg) which is run to ensure standardized commit messages. Conventional commits is used as the convention.

In short:

[optional 'maintenance' type][type]([optional scope])[breaking change]: [description]

[optional body]

Section	Explanation
'Maintenance' type	Revert Merge
Type	build docs feat fix perf refactor style test chore
Scope	Optional explanation of the scope of the change ie ux ui admin etc
Breaking change	When a breaking change is introduced use ! after the commit type
Description	10-52 char explanation what the commit does
Body	Optionally more axplanation on the what and why

The following commits correlate to SemVer version changes.

Commit	SemVer change
commit with !	Major version change, ie 2.x.x
commit type feat	Minor version change, ie x.2.x
commit with type fix	Patch version change, ie x.x.2

Build process

Development

To watch the files run yarn start.

Build for production

To build files for production run yarn build.

Browserslist

All source code gets transpiled according to our actual usage data. To make sure we don't support too old browsers, the usage data should be refreshed every once in a while (once-twice a year).
Generating the usage data can be done using browserslist-ga-export

Linting

Linters for both CSS and JS are available both for linting and fixing.
yarn lint yarn lint:fix for both CSS and JS
yarn lint:[css/js] for either CSS or JS
yarn lint:[css/js]:fix for either CSS or JS

Release preparation

Release steps are largely automated, this includes: changing branching to loosely follow gitflow, generating assets generating changelogs and tagging the new release. Only (purposely) manual step left is pushing the branches and tags to remote. Changelogs are autogenerated by standard-version if the commit guidelines are followed.
yarn release for running releases yarn dryrelease for checking what the impact of a release is.
CircleCI is used as the CI automation. Steps for releasing new versions are in the Planet4 Documentation

Dependencies

Adding external dependencies for a block can be done by enqueueing an asset and enqueueing external assets like so:

		$external_assets = [
			[
				'handle' => 'swiper',
				'src'    => 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.css',
				'type'   => 'style'
			],
			[
				'handle' => 'swiper',
				'src'    => 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.js',
				'type'   => 'script'
			]
		];
		Asset_Enqueuer::enqueue_external_asset( $external_assets );

asd