Full Site Editing: Add a Site Logo block

[scruffian]

Props @pablinos who wrote most of the code.

Description

This adds a Site Logo block to the Full Site Editing experiment.

This uses some filters to non-destructively override the theme mod value when the experiment is enabled and the site logo setting has a value.

How has this been tested?

• To test, enable the Full Site Editing experiment
• Add a template (e.g. Templates: Add demo templates directory and resolution logic. #18554)
• Add a Site Logo block to the template
• Add a Site Logo block to some content
• Try changing the alignment in the block toolbar
• Try modifying the width in the sidebar
• Try adding alt text in the media library
• Load the front end of the site and check that you can see the Site Logo

Screenshots

Known issues

If a non-admin triese to use this block they won't see anything.

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR. .

[davemart-in]

Some quick feedback:

• Alignment worked as expected
• Loading the logo block after already uploading an image worked as expected (the logo was pre-loaded when I did it the second time)
• There's no logo icon next to "Site Logo" there in the middle (just under the logo in the screenshot above)
• Resizing the image didn't seem to work immediately after I uploaded the image. I had to delete the block then add it again to get the resizing to work. I believe this is due to the fact that it was in edit mode (See screenshot above). But I'm not sure this is easy to grok.
• The "Upload" option didn't work for me. I selected a file and nothing happened. I had to select "Media Library" and upload my logo there.
• The resizing option in the sidebar is still set to % instead of px (guessing this is still being worked on).

[scruffian]

I had to add this line to get templates working. Not sure what I'm doing wrong.

[aduth]

I had to add this line to get templates working. Not sure what I'm doing wrong.

See also #18877. You may need to rebase.

[scruffian]

Is there a way to hook into notices without using compose?

[davemart-in]

Another round of testing. Here's what I found:

Block logo

• The solid icon style with the white star and the solid grey bg does not match up very well with the outline style of the other block icons (See: https://cl.ly/ef39e6725bc6). Can we swap this out for this SVG: https://d1czrtm2mp3lak.cloudfront.net/items/1R1D3s182R2i0v0S3I3e/logo.svg

Uploading

• I don't believe SVG files are allowed. When I try and upload one, nothing happens: https://cl.ly/38c8537baed6 Can we filter which file types are acceptable? The image block displays an inline error: https://cl.ly/e0cde373d136
• The image block shows a preview and a little loader icon immediately after you upload an image: https://cl.ly/242bfe94425e. The logo block just pauses for a long time and then appears once the file has been uploaded: https://cl.ly/fefa1ebbe185 Can we adopt the same loading state as the image block?

Resizing:

• Upon initial upload, the resize handles are not in the right place: https://cl.ly/1ba1478969da If you click then, they snap to the image. I noticed that if you upload the same image again, that this will not happen, so you'll need to use a new image. Here's the one I used: https://d1czrtm2mp3lak.cloudfront.net/items/3t1e2a1K392F3i1J2R1G/MyLogo.png
• Remove a logo block, then add it again and the logo dimensions are SUPER tiny: https://cl.ly/56df97dadc5f If you click the resize handle it magically resizes.
• When I edit a logo and select another image from the media library, the resize handles are all off. Clicking them does not help: https://cl.ly/a36aff132a54 My assumption is that they are stuck on the size of the previous logo.

Alignment

• Alignment within the image block seems to take place all within the bounds of the primary editor container: https://cl.ly/b181f5f6fd1a With the logo block the alignment options appear to take you outside of this container: https://cl.ly/1a5444bdaef8 It's not clear to me whether that was intentional.

Duplicate

• Creating a duplicate of the logo block creates a blank block container until you click outside, upon which the logo shows: https://cl.ly/78e6e5eb7927

Edit as HTML

• Edit as HTML produces no markup: https://cl.ly/63812a231d91 For comparison,. the image block produces the following markup: https://cl.ly/fb623fc4980f

Reusable Block

• Turning the logo block into a reusable block has some bugs: https://cl.ly/f855268e4513 At first it doesn't show up, until you click around. When you try and reuse it, the logo does not show up at all, despite clicking around. To contrast, here's what it looks like for the image block: https://cl.ly/e88bbbd27803

Hopefully that is helpful. Sorry for the big ole list! 😬

[scruffian]

@paaljoachim I think I've addressed all the concerns above, so this is ready for another review :)

[pablohoneyhoney]

A more unique icon and more integrated with the latest library and styles might help with consistency and identification.
Perhaps a flag. Available here.

[scruffian]

We don't have Line as a primitive. Maybe we should add it?

[pablohoneyhoney]

An alt logo in case it holds the toolbar with a better hierarchy.

The first one was

[youknowriad]

Left some comments, this block is very interesting, it highlights the fact that we lack good abstractions to manipulate images without reusing the entire image block. Not something to solve in this PR but I would love some thoughts/follow-ups on this.

[youknowriad]

I didn't test a lot but it looks good to me.