The WordPress Full Site Editing feature & BuddyPress

[imath]

Hi!

After reading this ​feedback about 8.0.0 missing support for Full Site Editing (FSE), I've checked it was actually the case... and IT IS!

If you activate the ​Gutenberg plugin, and the ​tt1-blocks theme, then go on any BuddyPress page, you'll get a blank page (remember the white screen of death, it looks like it) if you're not an admin or you'll get ​this page if you are an admin.

Reason:

The way FSE is overriding PHP templates loading consists of always using the gutenberg_dir_path() . 'lib/template-canvas.php' before rendering FSE blocks. When our BP Theme Compat API receives this template, it doesn't find it into the Theme or child theme so it ends up with the index.php template which is the only one available into the theme. I must say the message output by this index.php template can be misleading in this case:

This theme was built for the WordPress experimental full-site-editing feature. You need to install and activate the Gutenberg plugin to make it work.

I can imagine the user wondering "The Gutenberg plugin is active, my theme supports FSE, what's going wrong?" Well, not really. As the linked feedback showed above: the user says BuddyPress does not support WordPress FSE 😬.

This is pretty concerning, it's not that it's not possible to edit BP Pages layout thanks to the very promising FSE feature, it's that BuddyPress content is not shown at all on front-end, in other words we can't use BuddyPress (and probably bbPress and some other plugins) with WordPress FSE feature at all.

So I've explored Gutenberg code to understand how we'd need to fix this:

1. if the requested template is gutenberg_dir_path() . 'lib/template-canvas.php' then do not try to find it into the theme and simply return it unchanged. (not a big deal 👌)
2. We'd then need to stop resetting the post into our BP Theme Compat API, to be sure the FSE feature gets an existing post ID. (We've discussed about it during ​today's dev chat). (more of a big deal: how would BuddyPress plugins would behave if we'd change this?). I've found a ​workaround to fix it. But I must say I really don't feel comfortable with overriding the core/post-content block render callback 😱.
3. We'd finally need to take care of disabling the comments template as what we've put in place to disable it, is not working with the comments block.. but it's minor..

Who needs to adapt? Us, WordPress FSE? Thanks in advance for your opinions.

PS: the ​Gutenberg template canvas should be the index.php template file of the theme to at least fix the first issue (and avoid the WSOD) 😉

[imath]

Let's try to progress on it during 10.0.0 dev cycle.

[imath]

Now that Twenty Twenty Two has been merged into WordPress 5.9-alpha, things are easier to test. ​8474.patch brings BuddyPress into this theme and I believe all themes using the WordPress Full Site Editing feature.

If you try to go to any BuddyPress page having Twenty Twenty Two active without the patch, you'll get a blank page. Once you applied the patch, you'll get the BuddyPress content 🙌. See the screenshot below:

I'll commit the patch soon and leave this ticket open so we can use it to monitor WP 5.9 FSE progress.

[imath]

In 13145:

WP FSE Compat: make sure BuddyPress templates are loaded on front-end

Adapt the BuddyPress Theme Compat API so that it uses the WordPress block template canvas when the active theme supports block templates. You can now test BuddyPress inside Twenty Twenty-Two: the next WordPress default theme!

Improves the BP Nouveau Template Pack introducing a new function bp_nouveau_get_theme_layout_widths() to get the theme layout available widths and use the wider one by default.

See #8474

[oztaser]

Hi @imath,
I'm not sure this is the right ticket to raise an issue about Twenty Twenty-Two theme but I've seen you've mentioned this ticket in #8603 so that's why I'm here :)

I'm testing BuddyPress 10 Beta version on WordPress 5.9 Beta 2 with Twenty Twenty-Two theme and BuddyPress Nouveau template pack without an any block editor related plugin. I'm seeing BuddyPress pages (such as activities, groups, create groups) without an any issue but there is an issue in the group photo upload page. It looks like the screen page is not loading.

Am I missing something or this an issue?

[imath]

Hi @oztaser, thanks a lot for your tests, I’ve seen something weird on the invites screen too. I was planning to give it a look. It’s probably an issue, I’ll look at it asap 👍

[imath]

@oztaser I've tested and was able to upload the Group profile photo. But there's a weird issue when using MacOs and Twenty Twenty-one: underscore doesn't recognize the JS and operator &&. It works using Windows..

So in 8474-group-invites.patch, I'm suggesting to stop using the && operator into the JS template. This patch also improves user feedback when invites are restricted to Admins or Mods.

[oztaser]

I've worked on the issue about group avatar.

1. I'm using GNU\Linux and wp-env docker environment.
2. I disabled object cache and all other plugins.

Here are what I've found:

• Avatar upload screen is working well when group is creating.
• The issue occurs on /groups/example-group/admin/group-avatar/ page.
• My user is the only administrator of the group and I can change the group cover image.
• It looks like change avatar template is not loading. I don't even see the Change Group Avatar title in page source.
• I've compared how the page template loads on Twenty Twenty One and Twenty Twenty Two. Somehow Twenty Twenty Two can't run the action bp_after_group_admin_content [ 1 ]
• To fix this I've created the patch below. After this patch screen template is loading as I expected.

I don't know if this is a good solution or a real issue, but these are my test results.

diff --git a/src/bp-templates/bp-nouveau/includes/groups/functions.php b/src/bp-templates/bp-nouveau/includes/groups/functions.php
index f87d873af..9b49d248f 100644
--- a/src/bp-templates/bp-nouveau/includes/groups/functions.php
+++ b/src/bp-templates/bp-nouveau/includes/groups/functions.php
@@ -1211,7 +1211,7 @@ function bp_nouveau_group_get_core_manage_screens( $id = '' ) {
        $screens = array(
                'edit-details'        => array( 'hook' => 'group_details_admin',             'nonce' => 'groups_edit_group_details'  ),
                'group-settings'      => array( 'hook' => 'group_settings_admin',            'nonce' => 'groups_edit_group_settings' ),
-               'group-avatar'        => array(),
+               'group-avatar'        => array( 'hook' => 'group_settings_avatar',           'nonce' => ''                           ),
                'group-cover-image'   => array( 'hook' => 'group_settings_cover_image',      'nonce' => ''                           ),
                'manage-members'      => array( 'hook' => 'group_manage_members_admin',      'nonce' => ''                           ),
                'membership-requests' => array( 'hook' => 'group_membership_requests_admin', 'nonce' => ''                           ),

[ 1 ] ​https://github.com/buddypress/buddypress/blob/master/src/bp-core/bp-core-cssjs.php#L206

[imath]

Hi @oztaser Thanks a lot for your investigations and patch. I haven’t tested editing the group avatar, I’ll give it a look asap. What you describe seems familiar to me: the fact some actions
are not triggered in Twenty Twenty Two.

[imath]

I confirm I was able to replicate on my set-up + the Manage Members screen is also missing!

[imath]

In 13191:

BP Nouveau: make sure to load the Group's Manage Profile photo screen

Props oztaser

See #8474

[imath]

In 13192:

Stop using the && operator inside the Group invites JS templates

The BP Nouveau template pack's Invite UI is failing to render the fetched members when the active theme is supporting the WordPress Full Site editing. The reason is the underscore JS library weirdly doesn't recognize the && operator. To avoid this issue, we've edited the Nouveau Ajax actions/ Group Invites JS templates to set new properties making this operator useless.

This commit also improves the user feedback when invites are restricted to mods or admin (or both) and the current user is a regular group member.

See #8474

[imath]

In 13193:

Inject Group's Invites & Manage Members JS templates into footer

To make sure JS Templates are injected without being altered in WordPress themes supporting the Full Site Editing feature, we are now doing it inside the page's footer.

HTML placeholders for both UI have been moved out of the JS Templates and a backward compatibility for potential plugins still expecting these placeholders into these templates has been put in place.

See #8474

[imath]

We also have an issue with BP Dynamic Blocks, see ​https://github.com/buddypress/bp-blocks/pull/61/files

[imath]

In 13194:

BP Blocks: localize dynamic Blocks script data into site's footer

These script data were not printed into themes using the Full Site Editing feature, like Twenty Twenty-Two, which was generated a JavaScript error as soon as the user clicked on one of the links to filter the loop's items (friends, members or groups).
Moving the script localization to the site's footer makes sure the JavaScript error disappears and that links are fully functional. This change has also been successfully tested on regular WordPress themes.

See #8474

[imath]

The BP Nouveau Message UI also needs the JS Templates to be loaded into the footer to behave the right way in Twenty Twenty-Two

[imath]

The above patch is fixing the issue with TT2.

[imath]

In 13200:

BP Nouveau: Inject Private Messages JS templates into footer

To make sure JS Templates are injected without being altered in WordPress themes supporting the Full Site Editing feature, we are now doing it inside the page's footer.

HTML placeholders have been moved out of the JS Template and a backward compatibility for potential plugins still expecting these placeholders into this templates has been put in place.

See #8474

[imath]

In 13213:

BP Nouveau: inject Activity Post Form JS templates into footer

To make sure JS Templates are injected without being altered in WordPress themes supporting the Full Site Editing feature, we are now doing it inside the page's footer.

See #8474