Blockbase: social icons menu disappears if header template part is edited

[vindl]

1. Setup main and social menus in Customizer
2. Use Site Editor to resize logo
3. Social menu no longer works

Since the social menu stops working after using FSE I would need to add a Social icons block to the header. This takes additional time, and equally important this isn’t ideal for the customer making edits moving forward.

@mikeicode

More context in this post: pdh1Xd-Bb-p2

[vindl]

One idea from @simison:

I’m leaning on just informing the customer if we can detect the menu is about to get busted.

[mikeicode]

I’m leaning on just informing the customer if we can detect the menu is about to get busted.

If I understand this correctly the idea is to leave things the way they are but have a message when you visit FSE to resize the logo that your social menu will no longer work.

This isn't a great user experience and the problem will still exist. With Blockbase users are forced to use FSE to resize their logo (details on the P2 post). A message doesn't solve that issue or resolve the confusion with the primary menu working from the Customizer and the social menu not working, it also doesn't resolve the wasted time (setting up a social menu in the Customizer just to then be forced to set it up in FSE).

[mxhassani]

AFAIK Blockbase isn't supposed to have a social menu: d9BE8-p2

This could be linked: 5546-gh-Automattic/themes

[metabreakr]

This might be related: #5546

[supernovia]

Are these disappearing or displaying the wrong icons, like so?

[metabreakr]

@supernovia In #5546 the social icons appear to turn into what you have in your screenshot with FSE off, while they completely disappear with FSE when a template is edited as I detailed here: Automattic/wp-calypso#61384

IMO, these icons should be social icons blocks. I'm not sure why you'd want to turn off FSE for a block-based theme.

[supernovia]

Thanks @metabreakr, I modified that title slightly since it's showing the incorrect icons, rather than not displaying any. Hopefully that'll help.

Re: FSE being off, I've seen this on themes where FSE has not been used yet, and the workaround is to turn it on and edit the theme vs just having existing social menus work out of the box.

[mikeicode]

I ran into this again building a DIFM-L site using Alonso. Why don't FSE themes have social icon blocks in the headers by default like previous themes had the social menus?

Here's the process I need to go through to add a standard layout with social icons to the right of the menu.

Starting layout:

Adding the social icons block:

Now we have see this layout issue:

I'm not sure if I'm missing an easier way to resolve that, but this is how I did:

Finally:

IMO this is a lot of work just to get social icons next to the menu. I should also mention it took me a while to figure out how to achieve the above layout, I'm not sure how many users would actually be able to figure that out. It'd be easier if they were there by default and the user simply had to delete them if they didn't want them.

[metabreakr]

@mikeicode Adding the navigation and social icons blocks in a row block has been my workaround as well.

[supernovia]

📌 HOUSEKEEPING

• Labels ✅
• Priority ✅
• Replicable on Core - No; the social menu didn't work there at all. I'm guessing that's related, but if you want a separate bug report for that, let us know.

📌 SCRUBBING

• Tested on P2: n/a
• Tested on Simple ✅
• Tested on AT ✅
• Tested on Self-hosted ✅

📌 FINDINGS/SCREENSHOTS/VIDEO

• I can confirm that editing the header at all gets rid of the social menu, and resetting the template part it puts it back. The moment the header changes, the customizer/nav-menus.php social menu breaks. So I suspect it's an either/or situation that only applies to themes that use Customizer and FSE.

Screen.Recording.2022-06-07.at.8.24.27.PM.mov

• This happens on Simple
• It also happens on Atomic
• It only happens in Blockbase themes with a social menu set up in customizer or nav-menus.php
• The social menu does not render at all on my .org installation

@mikeicode asked

Why don't FSE themes have social icon blocks in the headers by default like previous themes had the social menus?

Is there a way to get the social menu working in the header template part without having to re-add it manually?

📌 ACTIONS

• Marking as triaged
• Transferred from wp-calypso to [themes](https://g@Robertght m/Blockbase: social icons menu disappears if header template part is edited #6077) cc @robergh
• Setting Priority to High, as this would impact all Blockbase themes with built-in social menus if the header is edited

📌 Message to Author - n/a

[mikeicode]

Thanks @supernovia

I ran into this again yesterday building a DIFM-L site using Russell.

[pbking]

The specifics as to why this is happening is because Blockbase uses an unsanctioned block attribute _unstableSocialLinks that is removed any time the header is saved.

Ideally we would like to transition users to use the FSE for all of their navigation needs now that 1) the FSE is more mature and B) it is available to everyone.

However making that change would effect existing installs so a bridge is definitely needed. Thus while tweaking that change addressing this situation will be to everyone's benefit.

[Addison-Stavlo]

Thanks for working on this!

Im going to remove it from Cylon backlog, and it looks like its tracked with the Blockbase 3.0 milestone now. 🎉

[pbking]

Closing: Work merged in #6167