BuddyPress Blocks !

[imath]

I think a good way to have some "real use cases" for the REST API is to use it into a new feature. And I think BuddyPress blocks are an easy and quick way to do so. Here's some early screenshots of what I've tried so far :

A new Blocks Category: BuddyPress

We could ship 2 or 3 dynamic blocks to test the REST API. I already built a static version of the Groups block, see the screencap below:

BuddyPress blocks could be developed into its own repository on GitHub and be added to core during a specific build step.

PS: @espellcaste This is what I've used to find the issues I've posted on the BP Rest repository.

[espellcaste]

Really interesting!

Here's what I think:

• We should decide on what types of blocks to add and what to add on them (and how useful and likely they would be used by the community);
• Focusing on specific components at first is a good idea, such as the groups component;
• I like the idea of developing at Github first.

@bonne might have something to add about adding blocks and @djPaul was really interested in it. So I think we should get their feedback and see what other plans they have in mind.

[espellcaste]

@imath Let's move this to the next release. This will give us more time to analyze and decide which blocks to introduce and how/when.

[karmatosed]

I am really excited about this and happy to work on some sketches if that works for the next release? I really like the idea of it being a separate repo, adding in each as it's baked and ready to be shipped, allowing it to be tested in the meantime. If I can help at all please let me know as I have some ideas on how we can translate into blocks visually.

[imath]

Move the first tickets to next major release.

[imath]

As discussed during October 30 dev-chat, Blocks will be developed from ​https://github.com/buddypress/bp-blocks and merged "JavaScript built" as soon as they're ready.

Priority for 6.0.0 is to build a block to highlight a single Group. Of course everyone can contribute to other Blocks pulling requests in the GH repo.

[espellcaste]

@imath Am I correct we will have two blocks for this release? Based on code merged on ​https://github.com/buddypress/bp-blocks

[imath]

Yes you are. I'll use this ticket to work on using WP CLI to generate our pot file. This is needed to make sure JS translation will be available for the blocks.

[imath]

8048.patch is containing:

• the BP Blocks code to merge into Core
• it replaces grunt-wp-i18n by WP CLI i18n command (to ensure JavaScript translations)
• it adds devDependencies for parcel-bundler, @babel/core and @wordpress/babel-preset-default
• it adapts the build process for BP Blocks
• it adds a src/js directory containing the development versions of the blocks.

npm start is like a grunt watch for these Block JavaScript files
npm run build is used to build the Block JavaScripts into 2 Grunt tasks. During the build process, the first one is done without minifying scripts to make sure Translations are generated by WP CLI, the second one is used after this translation step and minifies the scripts.

Unlike what I thought in the first place, I believe it's best to merge the BP Blocks into Core completely (Thanks @johnjamesjacoby for making me thought about it twice !).

I chose to add un-minified built Block JavaScript files into /src so that people starting to contribute to BuddyPress has no other steps to accomplish than checking out Trunk.

About the PHP part, I've added a specific BP_Block class and some other specific functions.

Feedbacks welcome ;)

[imath]

.2.patch is improving the previous patch making available the BP AutoCompleter component to BP Blocks developers. They just need to add a dependency to bp-block-components when registering the JavaScript file of their block to be able to use it like this:

const { AutoCompleter } = bp.blockComponents;

<AutoCompleter
	component="members"
	ariaLabel={ __( 'Member\'s username', 'buddypress' ) }
	placeholder={ __( 'Enter Member\'s username here…', 'buddypress' ) }
	onSelectItem={ setAttributes }
	useAvatar={ isAvatarEnabled }
/>

.2.patch is also moving Block Registration into BP Component classes.

[imath]

In 12573:

Add node modules to have tools to compile & bundle modern JavaScript

1. Add Parcel and Babel

Parcel is a web application bundler used to watch and build BP Blocks and BP Block components. It is associated with Babel, a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.

2. Add the default Babel preset for WordPress development.

3. Remove our development dependency to grunt-wp-i18n as we will use from now on WP CLI to generate a pot file that is also taking in account JavaScript i18n strings.

4. Add the needed Parcel commands to prepare BP Blocks compiling tasks.

5. Update Grunt.js to latest stable.

NB: contributors, please use npm install to update your node modules locally.

See #8048
See #8154

[imath]

In 12574:

Update Grunt tasks & .gitignore to match BP Blocks needs

• The makepot task is now using the WP CLI wp i18n make-pot command.
• Exclude JavaScript Files generated by Parcel/Babel from jsvalidate, jshint & uglify tasks.
• Add new tasks to build & minify BP Blocks files.

See #8048

[imath]

In 12575:

Update the node version to use for BP Blocks

See #8048

[imath]

In 12576:

Add the BP Block components & BP Blocks JavaScript development version

The src/js directory is containing the development version of the JavaScript files used to create the first BP Block Component and the two first BP Blocks.

The BP AutoCompleter component is this first BP Block Component, it is used by the BP Member Block and the BP Group Block to let site owners easily select the member or the group they wish to feature into their post. This component uses the BP REST API to suggest results for BP single items.

See #8048

[imath]

In 12577:

Build the BP Block components & BP Blocks JS un-minified version

This will make sure contributors will not have to run npm install && npm run dev to start using/testing BP Blocks from trunk.

See #8048

[imath]

In 12578:

Introduce the BP Blocks API into BP Core

• The BP_Block class is wrapping the WP_Block_Type one to manage JavaScript and CSS assets registration and script translations.
• To register a new BP Block, we are introducing a new function using this BP_Block class : bp_register_block().
• Registering BP Blocks needs to happen hooking the bp_blocks_init action.
• The BP_Component class now includes a new method BuddyPress components can use to register their blocks. It also makes sure this method is only usable if the BP REST API is available.
• The dynamic filter bp_{component_id}_register_blocks let developers add or disable BP component blocks.
• A dynamic action bp_{component_id}_blocks_init is fired once all corresponding BP component blocks has been registered.
• The bp_blocks_editor_settings filter is gathering specific BuddyPress editor settings into a bp object.

See #8048

[imath]

In 12579:

Introduce the BP Member Block

It uses the BP Blocks API to register a block to let site owners feature one member of their community site. It includes Block settings to enable/disable some information such as the profile photo, cover image, @mention name, profile button.

See #8048

[imath]

In 12580:

Introduce the BP Group Block

It uses the BP Blocks API to register a block to let site owners feature one group of their community site. It includes Block settings to enable/disable some information such as the group profile photo, the group cover image, the group description and the group home page button.

See #8048

[imath]

I've left the ticket open as the BP_TRAVISCI=travis:grunt is failing due to a missing config file according to this error:

Error: Could not find "stylelint-scss". Do you need a `configBasedir`?

The fact we are using an old version of stylelint-config-wordpress that doesn't seem to support node 10.13.0 might be the reason (see 11.0.0 in ​Changelog)

I'll look at it asap.

[imath]

In 12581:

Add a function to check the current installation support BP Blocks

As BuddyPress supports WordPress 4.8 and 4.9, we need to make sure the current installation is using WordPress >= 5.0.0 before loading the BuddyPress blocks.

See #8048

[imath]

In 12582:

Build tools: update CSS/SCSS linting node modules

• Update stylelint, grunt-stylelint, stylelint-config-wordpress to latest stable version.
• Add a specific stylelint config for BuddyPress.
• Lint some CSS/SCSS files.

PS: let's hope it will fix the Travis CI failing test!

See #8154
See #8048

[imath]

In 12584:

Build tools: remove npm tasks form travis:grunt ones.

Fixes #8048