Site Logo: Add option to set site icon from Site Logo block #35892
Conversation
|
Size Change: +505 B (0%) Total Size: 1.13 MB
ℹ️ View Unchanged
|
|
Hi @stacimc, thanks so much for digging into this. Are you still working on it? |
|
@noisysocks I'm just picking this back up. At the moment it matches designs proposed in the issue, except that it does not link to an external page to edit the Site Icon settings. I set this aside because I was expecting #29126 to add those settings somewhere in the Site editor or admin, where I could link to them. At the moment I think the best I can do is link to the Customizer, since unfortunately I don't think it's possible to link to the Site Identity section specifically. |
stacimc
changed the title
| const syncSiteIconHelpText = createInterpolateElement( | ||
| __( | ||
| "Site Icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps. If you don't have one, you can set your logo to also be your icon. If you do have a custom site icon, you can upload that from the Site Icon settings in the <a>Customizer</a>!" | ||
| ), |
There was a problem hiding this comment.
I have personal preference for less copy, especially seeing as the Site Logo block description covers a lot already, so this suggestion is 100% ignorable 😄
Toggle to set your logo to also be your icon. You can upload a custom site icon in the <a>Customizer</a>.
There was a problem hiding this comment.
Hm I was concerned with making sure that the distinction between icon and logo was clear here. You make a good point about the Site Logo block description -- I hadn't noticed it addresses the site icon in that text as well:
Display a graphic to represent this site. Update the block, and the changes apply everywhere it’s used. This is different than the site icon, which is the smaller image visible in your dashboard, browser tabs, etc used to help others recognize this site.
Knowing that it does feel a bit redundant, but I still think it's important to make sure the use of the toggle is clear from its own helptext, and I imagine not everyone will read through the block description 🤔
|
Thanks @stacimc ! So far, setting/resetting the logo and icon in the post mostly works for me in non-block and block themes (I tested Twenty Twenty One and TT1 Blocks). The changes are synched to the Customizer and on the frontend. I noticed an issue with new posts whereby I couldn't publish a new post if I deselect the site logo/icon options on the pre-publish panel. Nov-01-2021.10-11-55.mp4I'm not sure why it's occurring yet, but the error is Note, I can replicate this on trunk as well so it's not related to this PR I think. I just thought I'd flag it here first while it's fresh 😄 Created an issue here: #36096 |
@ramonjd This is a weird one, nice spot! I played around with this a bit and I can replicate it on trunk as well, and for that matter with other non-post entities like template parts, so I'm also confident this PR isn't related. Thanks for opening the issue, I'll add a comment there as well 👍 |
|
Swinging back to test this one further, I'm seeing a few things I didn't notice before. The following occurs when I've already set the logo as my site icon in the block editor and saved the post. Things appear as expected, but if I try to toggle the site icon off, without making any other changes, the editor state isn't dirty (and therefore not updatable) when toggling Use as site icon Toggling other options triggers a dirty state.
Also, toggling the checkbox in the editor no longer appears to have any effect. I don't see the pre-publish save bar to confirm Site changes (not sure if I should), and the site icon remains on the site and in the Customizer. I'm not if its related, but it looks like the dirtyRecords selector isn't being fired for some reason. Can you reproduce this as well? |
If I'm understanding you correctly, what you're doing is:
I think this is working as I intended, but I can see why it may be confusing and am very open to suggestions for different behavior. When you turn off the At the moment that option doesn't get persisted in an attribute or anything; when you load the block it is turned on if the logo/icon match. |
|
Another thing we could do is clear the site icon when the |
Thanks for clarifying this point. This makes total sense when you say it like that 😄 So it's more of a "Use once, then keep in sync with site icon" sort of thing? :) Armed with that revelation, I retested and can confirm that the switch toggles synching future changes to the site logo image. 👍 I'm not sure how to square it, but if I think of it as "Keep changes to the logo block in sync with the site icon", I still kinda expect the editor to allow me to save the state when I'm toggling off "Use as site icon". Even if it doesn't change/clear/affect the current value of the site icon. I'm not saying this is the right expectation to have of course! :)
Ah good point. I clearly didn't think that far ahead. I think assumed the behaviour that you propose in this comment, but I agree that it might cause an unintentional clearing of the site icon. It's a difficult one. Maybe the toggle control label changes once a site logo has been selected, or changes. So if the current site logo is not the site icon, it'd say "Use as site icon", then after toggling to "on" it would say "Keep in sync". No idea if that's possible or even a good idea, or if it would make things clearer 🤷 |
|
I updated this to persist the state of the toggle in a block attribute. Here's how it affects @ramonjd's scenario:
New behavior:
The problem is this makes staying synced with changes made to the Icon in the Customizer more confusing. Scenario:
Changing the icon elsewhere feels like a deliberate action to un-sync the logo and icon, so I would expect the toggle to be off when I revisit the block editor, even though I last saved it in the I think I'm happy with that balance. @mtias can you weigh in here -- does this align with your idea? |
|
Thanks for working on this @stacimc ! After retesting here's what I'm seeing now: Nov-04-2021.09-24-57.mp4✅ I inserted a new site logo and synched to my site icon. After saving, the site logo and icon match. I also went through the testing scenarios again and things are working as described. 🎉 |
ramonjd
added
[Type] Enhancement
Previously we were getting the logoBlockCount on block creation, but this value could become out of date if more Site Logo blocks were added afterward. Now we count the number of blocks at the time of block removal, so that it is guaranteed up-to-date, and we ensure that changes are only discarded if there are no other Site Logo blocks on the page.
stacimc
force-pushed
the
add/option-to-sync-site-icon-from-site-logo-block
branch
from
2410dd0
to
e3d32bf
Compare
|
Thanks for all the testing! Rebased to hopefully pick up e2e test fixes, and I've updated the logic to discard unsaved changes when removing the final Site Logo block.
I think this is consistent with the behavior currently on trunk. I can test setting a non-square Site Logo by going through the Customizer and clicking The behavior on hover is also in trunk, even when I select a Site Icon through the Customizer settings page and crop it appropriately. It looks like the animation is fairly new from #33132, and the outline comes from #29888. I do think that the outline looks unusual when a non-square icon is hovered: |
|
Not sure what's up with all the failing tests after rebase, taking another look now 👀 Edit: Updated the docs! The other tests should be good when we're able to re-run 🤞 |
There was a problem hiding this comment.
Great work @stacimc! I've re-tested this, and I can't reproduce any of the unsaved changes issues that I ran into previously. I believe they've all been fixed up via moving getGlobalBlockCount to its own useSelect (and calling it at the last minute when needed), and shifting the check for logoBlockCount to be against 0 instead of 1. This is testing really well 🙂
It'd be good to fix up the styling on the W button, but given the progress already in this PR, I'd be in favour of merging in this PR as-is and us then looking into the button styling in a follow-up, considering it's already a bug on trunk.
LGTM! 🎉
Yeah that was my main concern. I see that the "outline" is a pseudo element, so a simple |
stacimc
deleted the
add/option-to-sync-site-icon-from-site-logo-block
branch
@jameskoster Agreed! Issue created: #37564 |
stacimc
added
the
Backport to WP 6.7 Beta/RC
noisysocks
removed
the
Backport to WP 6.7 Beta/RC
* Add toggle for syncing site icon to site logo * Sync icon when first uploading logo, if no icon exists * Do not clear the site icon when toggling off syncing, instead restore to original icon * Link to Customizer from Site Logo syncing help text * Sync site icon on uploading new image or resetting image * Simplify logic * Automatically sync icon if none exists and adding logo for the first time * Add translated string for site icon property * Link directly to Site Icon settings in Customizer * Adjust copy * Correct opening customizer in new tab * Persist toggle state in an attribute * Turn the toggle off if the logo and icon fall out of sync If a user syncs the logo and icon via the toggle and saves changes, but later changes the site icon in the Customizer, we want the toggle to be reset to the `off` position when they next edit the block. * Discard unsaved changes to logo and icon when removing last Logo block * Prevent uncontrolled input when sync attribute undefined * Tighten up copy * Force syncing on initial selection * Get up-to-date logoBlockCount when removing block Previously we were getting the logoBlockCount on block creation, but this value could become out of date if more Site Logo blocks were added afterward. Now we count the number of blocks at the time of block removal, so that it is guaranteed up-to-date, and we ensure that changes are only discarded if there are no other Site Logo blocks on the page. * Add shouldSyncIcon attr to core blocks documentation
| const { editEntityRecord } = useDispatch( coreStore ); | ||
| const setLogo = ( newValue ) => | ||
|
|
||
| useEffect( () => { |
There was a problem hiding this comment.
Hi there!
The logic here doesn't make sense, it's creating bugs like #37760
Basically the logic here assumes than when we "unmount" the site logo block, we're removing it when it's not always the case, unmounting can happen in several ways:
- Switching to code editor in post editor
- Changing the current view (template/template part) in the site editor.
While I'm not sure about the rest of this PR, this effect should be removed.
There was a problem hiding this comment.
@stacimc I removed the hook and went through the testing instructions above under "Test discarding unsaved changes:"
I couldn't find any weird side effects, that is, the editor recognised and kept my updates when viewing previews and when switching between code/visual modes.
In other words, things still work for me.
Is there something I'm not testing right?
There was a problem hiding this comment.
The logic here doesn't assume that unmounting the block means we're removing it. It runs every time the block is unmounted, but it then checks the global block count to determine whether the Site Logo blocks have actually been removed; otherwise it should do nothing.
I think the problem is in the Site Editor, that getGlobalBlockCount isn't behaving the way I believed it would. Although all my own test scenarios still work for me, I'm able to reproduce the #37760 bug by:
- Add a Site Logo block and make a change in the Header part
- Add a different block to a different template part which does not contain a Site Logo block
- Hit Undo and see that the 'Redo' button is disabled
When the Site logo block unmounts, getGlobalBlockCount returns 0 this time.
There was a problem hiding this comment.
I'll put up a PR to remove the logic for now and then start looking into a better way of doing this. I do think it would be nice to discard those unsaved changes when the block is removed, if I can get it working.
There was a problem hiding this comment.
Thanks @stacimc getGlobalBlockCount is not reliable because the core/block-editor store is more like an internal store to an instance of the block editor and don't say anything about the presence of a block in a template (or all templates). It's just specific to the current state of the screen.
|
As all Threads are closed and redirected here for "Can't add favicon without customizer", and we only get the sulotion by either visit the customize.php manually or use the Site-Icon block #29126 I need to post this here:
So there should definetly be another solution to add a favicon for non-tech users. I think the FSE / Gutenberg was added to reduce the custom solutions made by Themes. |
Related to: #30406
Description
Adds an option in the Inspector Controls of the Site Logo block to sync the site logo image to the Site Icon. When the toggle is switched on, any updates persisted to the Site Logo image are also made to the Icon.
When you set a new Site Logo for the first time (ie add a new Logo block and upload an image when it was previously undefined), if there is no existing site icon this toggle will be automatically turned on and the logo will be synced to the icon. When the user saves the post, they Save prompt makes it clear that they are about to persist changes to the logo and/or icon.
Any unsaved changes to the Logo & Icon are discarded when you remove the last Site Logo block from a post (see testing instructions).
Notes
How has this been tested?
Test cases for an authorized user:
Test initial value of the toggle:
Test updating the Site Logo:
Resetoption from theReplacemenu in the block toolbar. You should again be prompted to save both the icon and the logo. Verify changes persist after saving (icon and logo should both be removed).Test persistence of Toggle state:
Test staying synced with changes via the Customizer:
Test discarding unsaved changes:
+in the toolbar. Scroll down to Site Logo and hover over it to make the preview appear, then move the cursor away so it disappears. This is to test that unmounting the Site Logo block in this preview also does not cause unsaved changes to be discarded. Again, the Logos in your post should be unaffected.LogoorIconin the pre-save menu, and if you insert a new Site Logo block it should display the published logo. Save the post and verify that the changes were not made.Tests as an unauthorized user (for example with the Author role):
Screenshots
Controls (updated to show the new copy):
Save prompt:
Types of changes
Checklist:
*.native.jsfiles for terms that need renaming or removal).