Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Site Logo]: Add option to remove/clear logo from the block #34820

Merged
merged 10 commits into from
Sep 28, 2021

Conversation

stacimc
Copy link
Contributor

@stacimc stacimc commented Sep 14, 2021

Closes #34796, tracked in #30406

Description

This PR adds a way to clear/remove the media from the Site Logo from within the block. I've added this as a Remove button in the block toolbar, similar to Replace, an icon in the block toolbar, but would love design feedback. a Reset button in the block toolbar, similar to Replace, and in keeping with the terminology used by the ToolsPanel.

How has this been tested?

I've attempted to test all the edge cases described in #33179 and #32919 for regressions with these new changes.

**IMPORTANT TESTING INSTRUCTIONS: ** Due to an issue raised in #33177, it's tricky to test updates to the actions (basically, the Core php file and the plugin php file for site-logo both get loaded), so you will need to either manually disable the similar code that's running in Core (wp-includes/blocks/site-logo.php) or copy over the changes in this PR to that file as well.

Simple flow:

  • On a site with no logo, insert a Site Logo block into a post. You should see the placeholder; neither the Replace nor Reset options are present in the toolbar.
  • Upload a logo through the media library. It should replace the placeholder; you should now see the Replace and Reset options.
  • Test that the Replace option still works
  • Click Reset; the placeholder should render again
  • Publish the post and refresh. You should still see the placeholder; on the frontend you should see no site logo.

When the logo is persisted:

  • Upload a logo through the Site Logo block and save the post; make sure to also save the Site Logo
  • Check that you see the Site Logo on the frontend of the post
  • In the editor, click Reset. You should see the placeholder rendered again.
  • Save the post. You should see the option to save the Site Logo as well; make sure this is selected. Refresh the page and the site logo should still display only the placeholder; it should not render on the frontend.

Custom Logo through customizer:

  • Set a custom logo in Customizer -> Site Identity and publish. In the block editor, insert a Site Logo block and make sure that it populates with the custom logo you just set.
  • Click Reset and save the post & Site logo
  • Open the Customizer -> Site Identity and verify the logo was removed here as well
  • Add a logo through the Site Logo block. Verify it appears in Customizer -> Site Identity.
  • Remove the logo from the Customizer, and verify that it is deleted in the block in the block editor as well.

Read-only logos for non-admins:

  • Make sure that your test site has a site logo set, either through the block or customizer.
  • Create a user with a non-admin role like Author (they should not have the ability to edit the site logo)
  • As this user, create a new post and insert a Site Logo block. They should see the site logo, but the Replace and Reset buttons should not be available. They should still be able to edit block attributes like the rounded style, width, etc.

Screenshots

Updated design using 'Reset':
Screen Shot 2021-09-22 at 11 29 57 AM

Read-only logo with no option to remove/replace, but access to block attrs (design has changed slightly to Reset):
Screen Shot 2021-09-14 at 11 12 59 AM

Types of changes

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • 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 (please manually search all *.native.js files for terms that need renaming or removal).

@stacimc stacimc requested a review from ajitbohra as a code owner September 14, 2021 18:57
@stacimc stacimc self-assigned this Sep 14, 2021
@stacimc stacimc added [Block] Site Logo Affects the Site Logo Block Needs Design Feedback Needs general design feedback. labels Sep 14, 2021
@github-actions
Copy link

github-actions bot commented Sep 14, 2021

Size Change: +5.07 kB (0%)

Total Size: 1.07 MB

Filename Size Change
build/block-directory/index.min.js 6.19 kB -8 B (0%)
build/block-editor/index.min.js 138 kB +3.81 kB (+3%)
build/block-editor/style-rtl.css 13.9 kB +20 B (0%)
build/block-editor/style.css 13.9 kB +20 B (0%)
build/block-library/index.min.js 148 kB +284 B (0%)
build/components/index.min.js 210 kB +434 B (0%)
build/components/style-rtl.css 16 kB +112 B (+1%)
build/components/style.css 16 kB +112 B (+1%)
build/edit-site/index.min.js 27.7 kB +275 B (+1%)
build/edit-site/style-rtl.css 5.22 kB +8 B (0%)
build/edit-site/style.css 5.21 kB +6 B (0%)
build/editor/index.min.js 37.4 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 931 B
build/admin-manifest/index.min.js 1.09 kB
build/annotations/index.min.js 2.7 kB
build/api-fetch/index.min.js 2.19 kB
build/autop/index.min.js 2.08 kB
build/blob/index.min.js 459 B
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 474 B
build/block-library/blocks/button/editor.css 474 B
build/block-library/blocks/button/style-rtl.css 600 B
build/block-library/blocks/button/style.css 600 B
build/block-library/blocks/buttons/editor-rtl.css 315 B
build/block-library/blocks/buttons/editor.css 315 B
build/block-library/blocks/buttons/style-rtl.css 370 B
build/block-library/blocks/buttons/style.css 370 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 131 B
build/block-library/blocks/code/theme.css 131 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 497 B
build/block-library/blocks/columns/style.css 496 B
build/block-library/blocks/cover/editor-rtl.css 666 B
build/block-library/blocks/cover/editor.css 670 B
build/block-library/blocks/cover/style-rtl.css 1.23 kB
build/block-library/blocks/cover/style.css 1.23 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 983 B
build/block-library/blocks/gallery/editor.css 988 B
build/block-library/blocks/gallery/style-rtl.css 1.6 kB
build/block-library/blocks/gallery/style.css 1.59 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/home-link/style-rtl.css 247 B
build/block-library/blocks/home-link/style.css 247 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 728 B
build/block-library/blocks/image/editor.css 728 B
build/block-library/blocks/image/style-rtl.css 482 B
build/block-library/blocks/image/style.css 487 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 488 B
build/block-library/blocks/media-text/style.css 485 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 568 B
build/block-library/blocks/navigation-link/editor.css 570 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 300 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/style-rtl.css 195 B
build/block-library/blocks/navigation-submenu/style.css 195 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.72 kB
build/block-library/blocks/navigation/editor.css 1.72 kB
build/block-library/blocks/navigation/style-rtl.css 1.48 kB
build/block-library/blocks/navigation/style.css 1.47 kB
build/block-library/blocks/navigation/view.min.js 2.74 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 198 B
build/block-library/blocks/page-list/style.css 198 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 B
build/block-library/blocks/post-author/editor-rtl.css 210 B
build/block-library/blocks/post-author/editor.css 210 B
build/block-library/blocks/post-author/style-rtl.css 182 B
build/block-library/blocks/post-author/style.css 181 B
build/block-library/blocks/post-comments-form/style-rtl.css 140 B
build/block-library/blocks/post-comments-form/style.css 140 B
build/block-library/blocks/post-comments/style-rtl.css 360 B
build/block-library/blocks/post-comments/style.css 359 B
build/block-library/blocks/post-content/editor-rtl.css 138 B
build/block-library/blocks/post-content/editor.css 138 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 398 B
build/block-library/blocks/post-featured-image/editor.css 398 B
build/block-library/blocks/post-featured-image/style-rtl.css 143 B
build/block-library/blocks/post-featured-image/style.css 143 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 378 B
build/block-library/blocks/post-template/style.css 379 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 60 B
build/block-library/blocks/post-title/style.css 60 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 378 B
build/block-library/blocks/pullquote/style.css 378 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 262 B
build/block-library/blocks/query-pagination/editor.css 255 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query-title/editor-rtl.css 85 B
build/block-library/blocks/query-title/editor.css 85 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 220 B
build/block-library/blocks/quote/theme.css 222 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 374 B
build/block-library/blocks/search/style.css 375 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 250 B
build/block-library/blocks/separator/style.css 250 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 462 B
build/block-library/blocks/site-logo/editor.css 464 B
build/block-library/blocks/site-logo/style-rtl.css 153 B
build/block-library/blocks/site-logo/style.css 153 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 165 B
build/block-library/blocks/social-link/editor.css 165 B
build/block-library/blocks/social-links/editor-rtl.css 812 B
build/block-library/blocks/social-links/editor.css 811 B
build/block-library/blocks/social-links/style-rtl.css 1.3 kB
build/block-library/blocks/social-links/style.css 1.3 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 636 B
build/block-library/blocks/template-part/editor.css 635 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/term-description/editor-rtl.css 90 B
build/block-library/blocks/term-description/editor.css 90 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 571 B
build/block-library/blocks/video/editor.css 572 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 853 B
build/block-library/common.css 849 B
build/block-library/editor-rtl.css 9.76 kB
build/block-library/editor.css 9.75 kB
build/block-library/reset-rtl.css 527 B
build/block-library/reset.css 527 B
build/block-library/style-rtl.css 10.3 kB
build/block-library/style.css 10.3 kB
build/block-library/theme-rtl.css 665 B
build/block-library/theme.css 669 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 47 kB
build/compose/index.min.js 10.3 kB
build/core-data/index.min.js 12.3 kB
build/customize-widgets/index.min.js 11.1 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 614 B
build/data/index.min.js 7.1 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 428 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.45 kB
build/edit-navigation/index.min.js 15.5 kB
build/edit-navigation/style-rtl.css 3.69 kB
build/edit-navigation/style.css 3.69 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 29 kB
build/edit-post/style-rtl.css 7.18 kB
build/edit-post/style.css 7.17 kB
build/edit-widgets/index.min.js 16.1 kB
build/edit-widgets/style-rtl.css 4.09 kB
build/edit-widgets/style.css 4.09 kB
build/editor/style-rtl.css 3.76 kB
build/editor/style.css 3.75 kB
build/element/index.min.js 3.17 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 5.34 kB
build/format-library/style-rtl.css 668 B
build/format-library/style.css 670 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.6 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.72 kB
build/keycodes/index.min.js 1.3 kB
build/list-reusable-blocks/index.min.js 1.85 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.88 kB
build/notices/index.min.js 845 B
build/nux/index.min.js 2.03 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.83 kB
build/primitives/index.min.js 921 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.63 kB
build/reusable-blocks/index.min.js 2.28 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.5 kB
build/shortcode/index.min.js 1.48 kB
build/token-list/index.min.js 562 B
build/url/index.min.js 1.74 kB
build/viewport/index.min.js 1.02 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.11 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@stacimc
Copy link
Contributor Author

stacimc commented Sep 14, 2021

👋 @creativecoder, I've just added you as a reviewer since you've worked on Site Logo recently, but let me know if there's someone else I should ping in addition/instead :)

@apeatling
Copy link
Contributor

@shaunandrews @jasmussen Should this be an icon for removing an image?

@andrewserong
Copy link
Contributor

Nice work @stacimc, and thanks again for detailed test instructions, it makes testing so much easier!

The behaviour within the block and full site editing is working well for me, but I ran into a couple of issues with the Customizer vs block settings for the logo. I was testing with TwentyTwenty theme. Here's the steps I used to reproduce:

Removing block doesn't appear to override Customizer's setting

  1. Activate TwentyTwenty theme
  2. From the Customizer, insert a logo
  3. Edit a post that contains a Site Logo block
  4. Remove the logo and update the post to save the logo
  5. Reload the Customizer — the old logo is still there
  6. Reload the front end of the site — the old logo is still there

site-logo-removal-tt-customizer-sml

Updating the logo from the block, and then removing it reverts the logo back to the one set by the Customizer

  1. Activate TwentyTwenty theme
  2. From the Customizer, insert a logo
  3. Replace the logo with another image and update the post to save the logo
  4. Reload the Customizer — the new logo is displayed
  5. From the post editor, remove the logo and update the post to save the logo
  6. Reload the Customizer — the previous logo set by the Customizer is displayed

site-logo-removal-tt-customizer-override-sml


I've added this as a Remove button in the block toolbar, similar to Replace, but would love design feedback.

I'm wondering if having the Remove button in the toolbar could potentially cause confusion for a user wishing to remove the block, but not the site logo altogether?

Would it work to move the Remove button to a sidebar panel where we can have explanatory text that this will remove the logo altogether? I imagine the task of removing the logo image is something that a user would do with less frequency than removing the block itself, so I'd guess having the button be slightly harder to reach for might not be too much of a problem. We could also add an additional Replace button there if it would look strange to have the Remove button on its own.

@andrewserong
Copy link
Contributor

For the issues I ran into above, I think there's a clue in #33179, which appears to have removed the _sync_site_logo_to_custom_logo. To quote @creativecoder:

Because of this, I propose removing _sync_site_logo_to_custom_logo, for now. If we ever have a specific use case (e.g. we need to delete the custom_logo setting when the logo is deleted from the block), we could add back exactly what we need, at that time.

If it adds too much complexity to add back in that sync function, I wonder if we can fire an update to the custom_logo theme mod separately for this use case?

@jasmussen
Copy link
Contributor

jasmussen commented Sep 15, 2021

I've missed this button, thank you for building it. I took the PR for a spin and saw it working as intended with adding and removing the logo from the toolbar:

site logo
Note, the black underline is an artifact of the theme I'm testing with.

It's mighty convenient and feel like the appropriate place for the button.

Should this be an icon for removing an image?

I had the same instinct because we don't yet have a good pattern for two text-only buttons side by side like they are here. I made some quick explorations:

Site logo toolbar

I don't have a clear favorite of the above, though the simplicity of option 2 is probably a good starting point: it simply increases the spacing between two text-only items. That change might end up being complex, though, due to the gnarly CSS of the block toolbar, and speaking of gap, it suggests we can now refactor the block toolbar to use that for spacing. Worth opening a separate ticket for?

@stacimc
Copy link
Contributor Author

stacimc commented Sep 15, 2021

I ran into a couple of issues with the Customizer vs block settings for the logo.

Thanks for pointing this out @andrewserong, not sure how I missed that in my testing. I've pushed a fix for this, and updated the testing instructions with an important point -- basically you'll need to manually disable the similar site-logo code in Core (wp-includes/blocks/site-logo.php) or copy in the new action added to site-logo/index.php here.

I'm wondering if having the Remove button in the toolbar could potentially cause confusion for a user wishing to remove the block, but not the site logo altogether?

I want to say this is probably fine, since the button here doesn't cause the block to be removed at the same time as deleting the media -- so the user gets immediate visual feedback that something else has happened. The change also doesn't persist unless they Publish/Update the post.

Would it work to move the Remove button to a sidebar panel where we can have explanatory text that this will remove the logo altogether?

Definitely agree that the user should get that explanatory text before potentially making unwanted changes across their site. I think this might be okay though, because when they save a post with modifications to the Site Logo (or likewise in the site editor) they'll get the appropriate warning in the Save message, and be prompted specifically to save the Site Logo separate from the rest of the post:

Screen Shot 2021-09-15 at 4 29 39 PM

I don't have a strong opinion about where it should go -- it seems reasonable to group it with Replace, but like you say it's also probably less-commonly-used and could be fine in the Inspector Controls. One benefit there is that it might be easier to nail down the design 😆

For now I've updated the button to an icon as it's the simplest modification, but I can play around with this a bit more to try to wrangle the toolbar styling a bit.

@jasmussen
Copy link
Contributor

I don't have a strong opinion about where it should go -- it seems reasonable to group it with Replace, but like you say it's also probably less-commonly-used and could be fine in the Inspector Controls. One benefit there is that it might be easier to nail down the design 😆

It seems reasonable to put it in the inspector as a secondary action. But it would likely need its own share of work in order to ensure the button is supported by enough context to make sense. For example the replace button in the block toolbar works because it's shown in context of the visual itself. So if we were to have a "Remove" button in the inspector, we'd likely want to also show a copy of the image there, complete with a duplicate "replace" button as well — a little like how the Cover block does a focal point picker.

Happy to create a mockup if need be?

@andrewserong
Copy link
Contributor

Thanks for the extra context @stacimc and fixing up the issue. I ran out of time to test this again today, but I'll give it another spin tomorrow. I don't feel too strongly about where the Remove button goes, either, and I think your point that the user will still need to confirm when they update the post helps mitigate the concern about the potential danger of it being in the toolbar.

Joen makes a very good point about the additional complexity needed to have the button make sense in the block inspector, so perhaps it's worth keeping it in the toolbar for the time being and we can come back to it as a follow-up if we feel like it could use the extra work?

@apeatling
Copy link
Contributor

I don't have a clear favorite of the above, though the simplicity of option 2 is probably a good starting point: it simply increases the spacing between two text-only items

Agree this is a good place to start for this PR.

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @stacimc! This is testing well for me now:

✅ Simple flow is working correctly
✅ Logo persistence is testing well in TT1-blocks
✅ Customizer syncing is now working correctly (tested with the change just in Gutenberg, and with the change copied over to core files)
✅ Read-only logos work correctly for non-admins

Personally I quite like the look of adding in the trash icon for the Remove button. I just left a comment on that — if we go with the icon, it could be good to add in a tooltip label.

Once Joen or others are happy with the design and give it the ✅, I think this PR will be good to land.

packages/block-library/src/site-logo/edit.js Outdated Show resolved Hide resolved
function _delete_custom_logo_on_remove_site_logo() {
$theme = get_option( 'stylesheet' );

// Unhook update and delete actions for custom_logo to prevent a loop of hooks.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea adding this to avoid accidentally causing a loop of hooks.

✅ Tested that with this code in the Gutenberg plugin, by execution time has_action returns false so these actions aren't registered, however the code doesn't appear to throw any warnings or cause any issues
✅ Tested that with this code copied to the site-title.php file in public_html/wp-includes/blocks/site-logo.php the actions are registered, so this code prevents the loop

For testing I added the following and inspected by debug.log file:

	$has_action_1 = has_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo' );
	$has_action_2 = has_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );

	error_log( 'has actions' );
	error_log( var_export( $has_action_1, true ) );
	error_log( var_export( $has_action_2, true ) );

The results were:

In Gutenberg plugin:

[17-Sep-2021 01:22:46 UTC] has actions
[17-Sep-2021 01:22:46 UTC] false
[17-Sep-2021 01:22:46 UTC] false

In Core:

[17-Sep-2021 01:36:55 UTC] has actions in core!
[17-Sep-2021 01:36:55 UTC] 10
[17-Sep-2021 01:36:55 UTC] 10

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gutenberg's build process is getting in the way here: because _delete_site_logo_on_remove_custom_logo and _delete_site_logo_on_remove_theme_mods are function names in this file, they are being automatically prefixed with gutenberg_.

This means that the unprefixed Core hooks for the site logo block are not removed, and end up running with remove_theme_mod( 'custom_logo' ), the result being that delete_option( 'site_logo' ); can be called twice. There's a check that prevents this from becoming an infinite loop, but I still think we should prevent this from happening.

You can verify this with the following steps

Without changing the build process, we could make the relevant function names in this file different from core, and that would work around the issue... something like

function gutenberg_delete_site_logo_on_remove_custom_logo( $old_value, $value ) { ...

function gutenberg_delete_site_logo_on_remove_theme_mods() { ...

function _delete_custom_logo_on_remove_site_logo() {
	$theme = get_option( 'stylesheet' );

	// Unhook update and delete actions for custom_logo to prevent a loop of hooks.
	// Gutenberg hooks.
	remove_action( "update_option_theme_mods_$theme", 'gutenberg_delete_site_logo_on_remove_custom_logo', 10 );
	remove_action( "delete_option_theme_mods_$theme", 'gutenberg_delete_site_logo_on_remove_theme_mods' );

	// Core hooks.
	remove_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10 );
	remove_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );

	// Remove the custom logo.
	remove_theme_mod( 'custom_logo' );

	// Restore update and delete actions.
	// Gutenberg hooks.
	add_action( "update_option_theme_mods_$theme", 'gutenberg_delete_site_logo_on_remove_custom_logo', 10, 2 );
	add_action( "delete_option_theme_mods_$theme", 'gutenberg_delete_site_logo_on_remove_theme_mods' );

	// Core hooks.
	add_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10, 2 );
	add_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );
}
add_action( 'delete_option_site_logo', '_delete_custom_logo_on_remove_site_logo' );

It's a little strange, as those functions will become prefixed with gutenberg_gutenberg_, but in practice I don't think that matters.


Another option would be to remove _delete_site_logo_on_remove_custom_logo_on_setup_theme from this file, and the two functions it hooks in (_delete_site_logo_on_remove_custom_logo and _delete_site_logo_on_remove_theme_mods).

Because this file is included on the init hook, and _delete_site_logo_on_remove_custom_logo_on_setup_theme is hooked into setup_theme, which runs before init, these functions are never run from Gutenberg (only from Core). They seem to be here only to keep this file consistent with Core. (related issue: #33177)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a check that prevents this from becoming an infinite loop, but I still think we should prevent this from happening.

That explains how I missed it 😱 Thank you for checking this!

I went with the first suggestion to rename the hooks in Gutenberg and unhook/rehook both. I'm a bit torn since I agree it's a little strange, but I think doing so actually makes the hook duplication clearer.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That fixed the issue, thanks!

Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for adding in the label text @stacimc, this is still testing nicely for me! The code change looks good, so I'm giving it the ✅

I noticed one slight design issue when switching the block editor to use "Display button labels" instead of icons. In that mode, the text size for icon-based buttons is slightly smaller than the normal text size of text-based buttons, so without a separating line the sizes are a tiny bit mismatched:

image

(To set this mode, in the editor go to Options > Preferences > Set Display Button Labels to True)

I imagine that's something at the component level, so we could look into that in a separate PR if it's an issue 🙂

@jasmussen
Copy link
Contributor

In testing this PR just now, I'm still seeing the trash icon:
Screenshot 2021-09-20 at 10 34 01

That probably okay if folks feel strongly for that option, but I do have a small preference for starting with option 1 or 2 from this list of exporations, which just shows "Replace" and "Remove" labels side by side (the full text "Remove logo" feels redundant).

@stacimc
Copy link
Contributor Author

stacimc commented Sep 20, 2021

That probably okay if folks feel strongly for that option, but I do have a small preference for starting with option 1 or 2

Personally I don't have a strong preference, so happy to go back to the text button. I do like the consistency with Replace. At the moment I've gone back to the original implementation and slightly increased the space between buttons:
Screen Shot 2021-09-20 at 11 15 06 AM

Removing the group prop from the BlockControls gives us something very close to Option 2 with a larger space, but the styling is a teeny bit off -- the Remove text is very slightly higher than the Replace text:
Screen Shot 2021-09-20 at 9 52 34 AM

@jasmussen What do you think?

@jasmussen
Copy link
Contributor

The PR has surfaced a need for some code & design love for multiple text buttons — likely an opportunity to improve how "label only" mode looks as well. I'll make a note to look at it if I get time. But if the 2nd option feels hacky and is visually offset, we should probably go with option 1 for now.

@jasmussen
Copy link
Contributor

Looking more closely at the screenshot (I'm unable to test in my environment currently) it appears as if the font size is bigger than that of the Image block replace button, so just to be sure, the font size should be 13px same as other buttons. That might also explain the height/offset differential in your second option.

I'm out tomorrow, otherwise I'd be happy to dive in and take a look.

@stacimc
Copy link
Contributor Author

stacimc commented Sep 20, 2021

it appears as if the font size is bigger than that of the Image block replace button, so just to be sure, the font size should be 13px same as other buttons.

Font size is 13px for both buttons 🤔 I took another look -- the issue is that there's a margin-top: -1px applied to ToolbarGroup. So if we wrap just the Remove button in ToolbarGroup we get this slight offset:
Screen Shot 2021-09-20 at 11 40 30 AM

If we wrap both buttons in ToolbarGroups, we get the dividing line (Option 3):
Screen Shot 2021-09-20 at 9 52 04 AM

The solution I have right now is to keep the group prop on BlockControls, so that both buttons are in a ToolbarGroup, and then nest the Remove button in an additional ToolbarGroup -- that gives us a little bit more spacing between buttons than we'd have otherwise, with equal margins and without the dividing border.

The PR has surfaced a need for some code & design love for multiple text buttons — likely an opportunity to improve how "label only" mode looks as well.

Agreed! Nesting ToolbarGroup in this way to increase spacing feels a bit hacky for now 🤔 I really like your Option 4, for example:

Screen Shot 2021-09-20 at 11 50 07 AM

@jasmussen
Copy link
Contributor

Took the latest branch for a spin, and this is what I see:
Screenshot 2021-09-22 at 08 36 19

I think it's fine to go with this for now, thanks for the back and forth. It doesn't preclude future iterations, notably the block toolbar and how it's pieced together could use a big refactor to embrace flex and simpler markup/css — but that shouldn't block this nice little improvement from landing.

@shaunandrews
Copy link
Contributor

I imagine there will be lots of confusion over the word "Remove" and if it relates to the "Remove block" item in the block's ellipsis menu:

image

Perhaps "Reset" would be a better label for this button?

@jasmussen
Copy link
Contributor

Good point, or "Clear".

@shaunandrews
Copy link
Contributor

"Reset" matches with the new Tools Panel:

image

@stacimc stacimc force-pushed the add/remove-site-logo-from-block branch from 0391de2 to 50cf885 Compare September 22, 2021 18:35
@stacimc
Copy link
Contributor Author

stacimc commented Sep 22, 2021

"Reset" matches with the new Tools Panel

That's a great point -- I'm sold! Changed to Reset.

@stacimc
Copy link
Contributor Author

stacimc commented Sep 22, 2021

@creativecoder I think this is almost good to go; would you mind taking a final look at the syncing of the Site Logo with the custom logo?

@simison
Copy link
Member

simison commented Sep 23, 2021

One good reason to use "Remove" or "Remove logo" as text label instead of trash-icon is to avoid mixing it with "Remove block":

Screenshot 2021-09-23 at 10 34 33

Copy link
Contributor

@creativecoder creativecoder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is working for me, though has one issue around unregistering Core hooks that I think we should resolve.

function _delete_custom_logo_on_remove_site_logo() {
$theme = get_option( 'stylesheet' );

// Unhook update and delete actions for custom_logo to prevent a loop of hooks.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Gutenberg's build process is getting in the way here: because _delete_site_logo_on_remove_custom_logo and _delete_site_logo_on_remove_theme_mods are function names in this file, they are being automatically prefixed with gutenberg_.

This means that the unprefixed Core hooks for the site logo block are not removed, and end up running with remove_theme_mod( 'custom_logo' ), the result being that delete_option( 'site_logo' ); can be called twice. There's a check that prevents this from becoming an infinite loop, but I still think we should prevent this from happening.

You can verify this with the following steps

Without changing the build process, we could make the relevant function names in this file different from core, and that would work around the issue... something like

function gutenberg_delete_site_logo_on_remove_custom_logo( $old_value, $value ) { ...

function gutenberg_delete_site_logo_on_remove_theme_mods() { ...

function _delete_custom_logo_on_remove_site_logo() {
	$theme = get_option( 'stylesheet' );

	// Unhook update and delete actions for custom_logo to prevent a loop of hooks.
	// Gutenberg hooks.
	remove_action( "update_option_theme_mods_$theme", 'gutenberg_delete_site_logo_on_remove_custom_logo', 10 );
	remove_action( "delete_option_theme_mods_$theme", 'gutenberg_delete_site_logo_on_remove_theme_mods' );

	// Core hooks.
	remove_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10 );
	remove_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );

	// Remove the custom logo.
	remove_theme_mod( 'custom_logo' );

	// Restore update and delete actions.
	// Gutenberg hooks.
	add_action( "update_option_theme_mods_$theme", 'gutenberg_delete_site_logo_on_remove_custom_logo', 10, 2 );
	add_action( "delete_option_theme_mods_$theme", 'gutenberg_delete_site_logo_on_remove_theme_mods' );

	// Core hooks.
	add_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10, 2 );
	add_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );
}
add_action( 'delete_option_site_logo', '_delete_custom_logo_on_remove_site_logo' );

It's a little strange, as those functions will become prefixed with gutenberg_gutenberg_, but in practice I don't think that matters.


Another option would be to remove _delete_site_logo_on_remove_custom_logo_on_setup_theme from this file, and the two functions it hooks in (_delete_site_logo_on_remove_custom_logo and _delete_site_logo_on_remove_theme_mods).

Because this file is included on the init hook, and _delete_site_logo_on_remove_custom_logo_on_setup_theme is hooked into setup_theme, which runs before init, these functions are never run from Gutenberg (only from Core). They seem to be here only to keep this file consistent with Core. (related issue: #33177)

Copy link
Contributor

@creativecoder creativecoder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the most recent changes, this is working well for me now.

function _delete_custom_logo_on_remove_site_logo() {
$theme = get_option( 'stylesheet' );

// Unhook update and delete actions for custom_logo to prevent a loop of hooks.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That fixed the issue, thanks!

@stacimc
Copy link
Contributor Author

stacimc commented Sep 28, 2021

@jasmussen Just double checking that this one is ready to merge from a UI perspective with the new Reset text?

@jasmussen
Copy link
Contributor

Yep let's try it!

@stacimc stacimc merged commit fdf9057 into trunk Sep 28, 2021
@stacimc stacimc deleted the add/remove-site-logo-from-block branch September 28, 2021 20:32
@github-actions github-actions bot added this to the Gutenberg 11.7 milestone Sep 28, 2021
@@ -132,7 +132,7 @@ function _sync_custom_logo_to_site_logo( $value ) {
* @param array $old_value Previous theme mod settings.
* @param array $value Updated theme mod settings.
*/
function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
function _gutenberg_delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't ideal because it means that, when these changes are merged into Core, that Core will have a function prefixed with _gutenberg.

Comment on lines +188 to +189
add_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10, 2 );
add_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

_delete_site_logo_on_remove_custom_logo and _delete_site_logo_on_remove_theme_mods both won't exist when Core's copy of site-logo.php is updated to be the site-logo/index.php that we see here. This causes a fatal error.

Fatal error: Uncaught TypeError: call_user_func_array(): Argument #1 ($callback) must be a valid callback, function "_delete_site_logo_on_remove_custom_logo" not found or invalid function name

I think we should revert 0140ba0 and work around the issue with Gutenberg's build process in a different way. I'll open a PR to do this.

Copy link
Member

@noisysocks noisysocks Nov 4, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix here: #36195

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Site Logo Affects the Site Logo Block Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Allow clearing / removing the media.
8 participants