Full Site Editing: Add a Site Logo block #18811

scruffian · 2019-11-28T17:20:35Z

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 · 2019-12-02T19:54:42Z

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 · 2019-12-03T14:53:21Z

lib/template-loader.php

@@ -195,6 +195,7 @@ function gutenberg_find_template( $template_file ) {

 		$_wp_current_template_content = $current_template_post->post_content;
 	}
+	$_wp_current_template_content = $current_template_post->post_content;


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

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 · 2019-12-03T15:38:31Z

packages/block-library/src/site-logo/edit.js

+import icon from './icon';
+
+const onError = ( message ) => {
+	console.log( message );


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

davemart-in · 2019-12-06T12:44:03Z

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 · 2020-06-23T15:40:16Z

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

packages/block-library/src/site-logo/edit.js

pablohoneyhoney · 2020-06-23T22:24:10Z

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 · 2020-06-30T14:02:06Z

packages/block-library/src/site-logo/icon.js

+			stroke="black"
+			strokeWidth="1.5"
+		/>
+		<line


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

pablohoneyhoney · 2020-07-01T13:15:45Z

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.

packages/block-library/src/site-logo/edit.js

packages/block-library/src/site-logo/editor.scss

packages/block-library/src/site-logo/index.php

youknowriad

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

packages/block-library/src/site-logo/edit.js

scruffian requested review from ajitbohra, jorgefilipecosta, Soean, talldan and TimothyBJacobs as code owners November 28, 2019 17:20

scruffian force-pushed the add/site-logo branch from c61a729 to b56cfb7 Compare December 2, 2019 14:57

scruffian commented Dec 3, 2019

View reviewed changes

scruffian force-pushed the add/site-logo branch from 6344170 to f81fb17 Compare December 3, 2019 16:53

scruffian requested review from ellatrix, gziolo and youknowriad as code owners December 3, 2019 16:53

scruffian mentioned this pull request Dec 4, 2019

FSE: Add a site logo block Automattic/wp-calypso#38162

Closed

scruffian force-pushed the add/site-logo branch from db432db to 61988b9 Compare December 6, 2019 11:42

scruffian force-pushed the add/site-logo branch 3 times, most recently from 92bb185 to d508843 Compare December 10, 2019 11:17

scruffian requested review from chrisvanpatten, daniloercoli, etoledom, mkaz, nerrad, noisysocks, ntwb and SergioEstevao as code owners December 10, 2019 11:17

scruffian force-pushed the add/site-logo branch 2 times, most recently from 2213bd1 to 7d6df86 Compare December 10, 2019 11:49

scruffian mentioned this pull request Dec 11, 2019

Media Replace Flow: Don't show the URL option unless there is a handler #19063

Merged

3 tasks

fix alignment in the BlockControls

70ce3d7

Copons reviewed Jun 23, 2020

View reviewed changes

packages/block-library/src/site-logo/edit.js Show resolved Hide resolved

packages/block-library/src/site-logo/edit.js Show resolved Hide resolved

uopdate icon

e54cbd7

scruffian commented Jun 30, 2020

View reviewed changes

scruffian added 2 commits June 30, 2020 15:18

simplify code

632bc72

Hide the spinner when the site logo has loaded

7fef33b

youknowriad reviewed Jul 9, 2020

View reviewed changes

scruffian added 3 commits July 9, 2020 13:17

Use the real url for the site logo

9288aec

remove dead code

13a5265

remove unused CSS

e343862

youknowriad approved these changes Jul 9, 2020

View reviewed changes

combine the useSelect calls

0d2585b

youknowriad reviewed Jul 9, 2020

View reviewed changes

packages/block-library/src/site-logo/edit.js Outdated Show resolved Hide resolved

scruffian added 2 commits July 9, 2020 15:01

pass an empty array to useSelect to stop it firing on every render

2f08a3b

Linter fixes

b860109

youknowriad approved these changes Jul 9, 2020

View reviewed changes

scruffian added 2 commits July 9, 2020 16:28

add fixtures for the site-logo block

884d081

remove unused code

9718c79

scruffian mentioned this pull request Jul 9, 2020

Add a Line primitive #23837

Open

fix for linter

8638ccf

scruffian mentioned this pull request Jul 9, 2020

Abstract code for manipulating images #23838

Closed

scruffian merged commit e8daf61 into WordPress:master Jul 9, 2020

scruffian deleted the add/site-logo branch July 9, 2020 16:55

github-actions bot added this to the Gutenberg 8.6 milestone Jul 9, 2020

ockham mentioned this pull request Nov 11, 2020

Site Logo: Delete sitelogo option rather than syncing it when setting theme mod #26895

Closed

2 tasks

ntsekouras mentioned this pull request Feb 25, 2021

Show Site Logo's block toolbar when selected, after the editor loads #29336

Merged

ellatrix mentioned this pull request Apr 11, 2024

Image cropper: remove clientWidth prop with useResizeObserver #60674

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Full Site Editing: Add a Site Logo block #18811

Full Site Editing: Add a Site Logo block #18811

scruffian commented Nov 28, 2019 •

edited

Loading

davemart-in commented Dec 2, 2019

scruffian Dec 3, 2019

aduth Dec 3, 2019

scruffian Dec 3, 2019

davemart-in commented Dec 6, 2019

scruffian commented Jun 23, 2020

pablohoneyhoney commented Jun 23, 2020 •

edited

Loading

scruffian Jun 30, 2020

pablohoneyhoney commented Jul 1, 2020

youknowriad left a comment

youknowriad left a comment

Full Site Editing: Add a Site Logo block #18811

Full Site Editing: Add a Site Logo block #18811

Conversation

scruffian commented Nov 28, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Known issues

Types of changes

Checklist:

davemart-in commented Dec 2, 2019

scruffian Dec 3, 2019

Choose a reason for hiding this comment

aduth Dec 3, 2019

Choose a reason for hiding this comment

scruffian Dec 3, 2019

Choose a reason for hiding this comment

davemart-in commented Dec 6, 2019

scruffian commented Jun 23, 2020

pablohoneyhoney commented Jun 23, 2020 • edited Loading

scruffian Jun 30, 2020

Choose a reason for hiding this comment

pablohoneyhoney commented Jul 1, 2020

youknowriad left a comment

Choose a reason for hiding this comment

youknowriad left a comment

Choose a reason for hiding this comment

scruffian commented Nov 28, 2019 •

edited

Loading

pablohoneyhoney commented Jun 23, 2020 •

edited

Loading