This pull request contains a playground to work on the introduction of a block based Activity post form into BuddyPress. The playground is available in a WP Admin screen you can reach using the submenu of the Activity Administration menu.

Benefits of using a block based activity post form

The block toolbar

The default Activity Post form block is a custom block bp/text. It is an adaptation of the core/paragraph block that is neutralizing block toolbar controls we don't need:

• Alignments
• Inline image
• Inline code
• Strikethrough
• Text color

Formatting text and adding links is more intuitive

Let's keep it simple! I believe we just need the bold, italic and link controls. Users don't need to know which tags are allowed or how to write HTML to format the text of their activity or add a link to a selected text anymore. They just need to select the text and click on the button of the block format toolbar.

Inserting Emojis is finally a lot more easier

The bp/text block adds a new control to the block toolbar: an Emoji picker. Is this a gadget? I believe it's a must have for BuddyPress as we are a community software. Users don't have to remember the keyboard keys to combine to display their operating system Emoji Picker anymore. They can simply click on the Emoji button to display the BP Emoji picker block component. This component is only using WordPress supported emojis and it organizes them into categories (the first line of the popover).

PS: this PR also includes some filters to make sure BuddyPress improve emojis rendering.

The Activty settings sidebar

By default, it is not visible. But if users need extended sharing options, they can simply click on the button immediately at the right of the "Publish" button.

Scheduling an activity

When I've first read 7953, I thought it seems easy to fetch activities that are posted before "right now", but it's a lot more difficult to adapt the Activity Post form UI without over complexifying it.

Using the Block Editor's DateTimePicker component it's very easy to let users define the date/time when their activity will be listed into the Activity Stream.

PS: this PR also includes some filters to only list Activities published before "right now" and to allow saving the Activity date using the BP REST API.

Sharing an activity into a group

Choosing whether to post an activity into "my profile" or into "a Group" also happens into the Activity settings sidebar. The block based Activity post form is using the BP Autocompleter component to let the users select the group in which to post their activity. This Autocompleter component needs to be improved so that it is possible to only list current user's groups when we need to.

PS: this PR also includes some filters to only list current user's Groups into the Autocompleter.

The (BP Activity) Blocks API

I believe it is the most interesting benefit of using a block based Activity Post form. Today, when BuddyPress Plugin developers extend this post form, they do not have a structured way to process, they simply use a hook: it can be a very different one from plugins to plugins. Plugins are most using jQuery (some can tidy this a bit using Backbone), UI controls can look very different. This is really not ideal for BuddyPress users. By extending the WordPress Blocks API to make available a BP Activity Blocks API we will improve all this and we'll benefit from the "WordPress Blocks" developers interest to give our users great new BP Activity Blocks to share richer content like Media, or more interactive content like Polls.

Being able to add new BP Activity Blocks is an idea I have since I've began rewriting the BP Attachments component. For now to give us a preview of this possibility I've restricted WordPress core Blocks to the core/image one and some core/embed ones. The goal is to replace the core/image that is only available for users having the upload_files capability in favor of a BP Attachments one to finally let users post Media directly into their activities.

Going on front-end!

Posting Activities unlike WordPress post types happens on the website's front-end. Bringing this block based Activity post form in this area is the goal and a huge challenge mainly due to the fact we have less control over the layout. There's ~ one WordPress Administration layout, but there are thousands of different front-end layout. But we allready did such important interface changes on the front-end into BP Nouveau eg: the Private Messages interface, the Group invites interface and the Group Members management interface. I'm sure we can do it again! We can do it using small steps:

• Making the block based Activity Post form only available from a WP Admin screen
• Making the block based Activity Post form only available into a new complete "BP Default" theme
• Making the block based Activity Post form availble from a modal
• Making the block based Activity Post form availble from a new template pack
• ...

Something else to consider is the way to keep the current behavior of the activity screens on front-end: when you post an activity it's immediately appended to the activity stream. I believe it can be achieved using the JavaScript postMessage feature and extending the Activity BP REST Endpoint so that the create_item() response also includes a full rendered activity (using output control functions like ob_get_clean() we already use for the BP Theme compat feature).

Backwards compatibility

The Block editor has been introduced in WordPress 5.0 and we are supporting WordPress back to 4.8. It is used by 2.7% of users, so we should probably raise this to 4.9. Anyways, if the WordPress site doesn't "support" Blocks, we can always fall back to our good old activity post form 😉.

The current PR uses the way WordPress renders post content to render activities: If the activity content has_blocks() then and only then blocks are rendered. It has no impacts on previous activities and migrating "plain content activities" to "block based content activities" is not an emergency blocker as we are not allowing activity edits on the front-end, this is only available from the WordPress Activity Administration screen. Moreover, the Blocks API only adds HTML comments that are not rendered so it's not problematic imho.

Demonstration 🎥

You can view a demo of the PR from my vimeo account. It's wrapping up all the screen captures I've used above.

It works 🙌 !

Here are some information about my configuration:

• WordPress 5.4.2
• BuddyPress 7.0.0-alpha

Credits

I've been able to work on this PR thanks to this WordPress tutorial and the great work accomplished by @getdave on his Standalone Gutenberg Block Editor repository.