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

Makes cover block dynamic and adds featured image binding #39658

Merged
merged 2 commits into from
Apr 4, 2022

Conversation

draganescu
Copy link
Contributor

@draganescu draganescu commented Mar 22, 2022

What?

Closes #13795 and advances #37753.

Alternative to #39410.

  • Known bug: sometimes the featured image is not set when toggled.

Why?

This approach doesn't care about keeping cover agnostic from WordPress and copies the method used by the FeaturedImage block to bind the block's background to the featured image.

How?

We get the featured image from the nearest entity. If the block is not in a post, or does not get the postId from context, the binding (including UI) is unavailable. Once the binding is active - via setting a new attribute useFeaturedImage - then we watch for updates outside of the block to the post featured image.

To handle the fact that the featured image can be changed else where we changed the save function of the cover block to replace the url on the fly with a token WordPress://featured-image which gets replaced with the live featured image by the new cover block's server side renderer.

This WordPress://featured-image is not a perfect solution, the other option would be, but not sure if possible, to not run any save (set save to null) and reimplement the rendering on the server side. Replaced with server side preg_replace injection of HTML.

Testing Instructions

  • switch to this branch
  • create a post
  • add a cover block, and pick an image from the media library
  • add a featured image to the post
  • on the cover block click the featured image icon in the toolbar
    = the featured image should appear instead
  • change the post's featured image
    = the cover block's background should change
  • install a plugin that can change the featured image (e.g. Featured Image by URL)
  • change the post's featured image via the plugin
    = verify that on the front end the cover block renders with the image you've set.

Screenshots or screencast

dynamic-cover-block

@draganescu draganescu added [Type] Enhancement A suggestion for improvement. [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Mar 22, 2022
@github-actions
Copy link

github-actions bot commented Mar 22, 2022

Size Change: +430 B (0%)

Total Size: 1.22 MB

Filename Size Change
build/block-library/index.min.js 174 kB +430 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 993 B
build/admin-manifest/index.min.js 1.24 kB
build/annotations/index.min.js 2.77 kB
build/api-fetch/index.min.js 2.27 kB
build/autop/index.min.js 2.15 kB
build/blob/index.min.js 487 B
build/block-directory/index.min.js 6.49 kB
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-editor/index.min.js 148 kB
build/block-editor/style-rtl.css 15.5 kB
build/block-editor/style.css 15.5 kB
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 150 B
build/block-library/blocks/audio/editor.css 150 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/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 59 B
build/block-library/blocks/avatar/style.css 59 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 445 B
build/block-library/blocks/button/editor.css 445 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 292 B
build/block-library/blocks/buttons/editor.css 292 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 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 103 B
build/block-library/blocks/code/style.css 103 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 406 B
build/block-library/blocks/columns/style.css 406 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-template/style-rtl.css 127 B
build/block-library/blocks/comment-template/style.css 127 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-query-loop/editor-rtl.css 95 B
build/block-library/blocks/comments-query-loop/editor.css 95 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.56 kB
build/block-library/blocks/cover/style.css 1.56 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 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 353 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 961 B
build/block-library/blocks/gallery/editor.css 964 B
build/block-library/blocks/gallery/style-rtl.css 1.51 kB
build/block-library/blocks/gallery/style.css 1.51 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 76 B
build/block-library/blocks/heading/style.css 76 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 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 529 B
build/block-library/blocks/image/style.css 535 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 199 B
build/block-library/blocks/latest-posts/editor.css 198 B
build/block-library/blocks/latest-posts/style-rtl.css 447 B
build/block-library/blocks/latest-posts/style.css 446 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 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 493 B
build/block-library/blocks/media-text/style.css 490 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 708 B
build/block-library/blocks/navigation-link/editor.css 706 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 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/view.min.js 375 B
build/block-library/blocks/navigation/editor-rtl.css 2.03 kB
build/block-library/blocks/navigation/editor.css 2.04 kB
build/block-library/blocks/navigation/style-rtl.css 1.93 kB
build/block-library/blocks/navigation/style.css 1.92 kB
build/block-library/blocks/navigation/view.min.js 2.85 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 363 B
build/block-library/blocks/page-list/editor.css 363 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 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 260 B
build/block-library/blocks/paragraph/style.css 260 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/style-rtl.css 446 B
build/block-library/blocks/post-comments-form/style.css 446 B
build/block-library/blocks/post-comments/style-rtl.css 521 B
build/block-library/blocks/post-comments/style.css 521 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 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/style.css 153 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 323 B
build/block-library/blocks/post-template/style.css 323 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 80 B
build/block-library/blocks/post-title/style.css 80 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 370 B
build/block-library/blocks/pullquote/style.css 370 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 221 B
build/block-library/blocks/query-pagination/editor.css 211 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/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 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 397 B
build/block-library/blocks/search/style.css 398 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 140 B
build/block-library/blocks/separator/editor.css 140 B
build/block-library/blocks/separator/style-rtl.css 233 B
build/block-library/blocks/separator/style.css 233 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 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 759 B
build/block-library/blocks/site-logo/editor.css 759 B
build/block-library/blocks/site-logo/style-rtl.css 181 B
build/block-library/blocks/site-logo/style.css 181 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 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.37 kB
build/block-library/blocks/social-links/style.css 1.36 kB
build/block-library/blocks/spacer/editor-rtl.css 332 B
build/block-library/blocks/spacer/editor.css 332 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 226 B
build/block-library/blocks/tag-cloud/style.css 227 B
build/block-library/blocks/template-part/editor-rtl.css 149 B
build/block-library/blocks/template-part/editor.css 149 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/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 934 B
build/block-library/common.css 932 B
build/block-library/editor-rtl.css 9.96 kB
build/block-library/editor.css 9.96 kB
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 11.3 kB
build/block-library/style.css 11.3 kB
build/block-library/theme-rtl.css 689 B
build/block-library/theme.css 694 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 46.8 kB
build/components/index.min.js 223 kB
build/components/style-rtl.css 14.9 kB
build/components/style.css 14.9 kB
build/compose/index.min.js 11.2 kB
build/core-data/index.min.js 14.5 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.39 kB
build/customize-widgets/style.css 1.39 kB
build/data-controls/index.min.js 663 B
build/data/index.min.js 8.65 kB
build/date/index.min.js 32 kB
build/deprecated/index.min.js 518 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.58 kB
build/edit-navigation/index.min.js 15.8 kB
build/edit-navigation/style-rtl.css 4.04 kB
build/edit-navigation/style.css 4.05 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 29.6 kB
build/edit-post/style-rtl.css 7.07 kB
build/edit-post/style.css 7.07 kB
build/edit-site/index.min.js 46.6 kB
build/edit-site/style-rtl.css 7.74 kB
build/edit-site/style.css 7.71 kB
build/edit-widgets/index.min.js 16.3 kB
build/edit-widgets/style-rtl.css 4.4 kB
build/edit-widgets/style.css 4.39 kB
build/editor/index.min.js 38.4 kB
build/editor/style-rtl.css 3.71 kB
build/editor/style.css 3.71 kB
build/element/index.min.js 4.29 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 6.62 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.66 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.79 kB
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.83 kB
build/keycodes/index.min.js 1.41 kB
build/list-reusable-blocks/index.min.js 1.75 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.94 kB
build/notices/index.min.js 957 B
build/nux/index.min.js 2.12 kB
build/nux/style-rtl.css 751 B
build/nux/style.css 749 B
build/plugins/index.min.js 1.98 kB
build/preferences/index.min.js 1.2 kB
build/primitives/index.min.js 949 B
build/priority-queue/index.min.js 611 B
build/react-i18n/index.min.js 704 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.69 kB
build/reusable-blocks/index.min.js 2.24 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11.2 kB
build/server-side-render/index.min.js 1.61 kB
build/shortcode/index.min.js 1.52 kB
build/token-list/index.min.js 668 B
build/url/index.min.js 1.99 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 280 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.07 kB

compressed-size-action

Copy link
Contributor

@getdave getdave left a comment

Choose a reason for hiding this comment

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

Firstly - thank you so much for working on this feature. It's important and will be greatly appreciated by lots of people 👏

I tested against your instructions and it worked 🎉

Screen.Capture.on.2022-03-23.at.10-43-21.mov

I then proceeded to stress test and I think I've found a bug.

If you copy a block which is using the featured image into a new post which does not have a featured image, the image does not update to reflect this fact. This can lead to inconsistency between editor and front of site and missing images on the front of the site:

Screen.Capture.on.2022-03-23.at.10-56-38.mov

The good news is that if the post does already have a featured image then it works perfectly:

Screen.Capture.on.2022-03-23.at.11-01-22.mp4

packages/block-library/src/cover/save.js Outdated Show resolved Hide resolved
packages/block-library/src/cover/index.php Show resolved Hide resolved
packages/block-library/src/cover/index.php Outdated Show resolved Hide resolved
@scruffian
Copy link
Contributor

Thanks for working on this. We're getting close!

Here are some issues I found:

  • If there's no featured image set, I get a broken image on the frontend. I think in this case we should just no output an image in the block
  • If I toggle the featured image button on and off I lose my original image - we should retain it as I will probably press the button just to see what it does and I don't want it to break my content
  • If I toggle the featured image on and there's no featured image set then maybe we should see a placeholder like we have for the featured image block:

Screenshot 2022-03-23 at 12 07 21

@draganescu draganescu force-pushed the add/cover-featured-image-background branch 2 times, most recently from a270352 to b18487d Compare March 25, 2022 18:23
@draganescu
Copy link
Contributor Author

This is ready for a new review. It now:

  • fixes the problem of broken image when no featured image is set, renders nothing.
  • preserves the original cover if one is chosen
  • implements a pattern seen in other places in the code base, where we don't save in the client side save function neither the style nor the img element, and we inject them on server rendering via preg_replace. Takes a cue from places like this 🎩 @youknowriad

@scruffian
Copy link
Contributor

This is looking great. A few things I found:

  1. If I don't have a featured image, when I hit the featured image toggle, I still see my selected image, not an empty image placeholder, in the editor:

Screenshot 2022-03-25 at 19 06 56

On the frontend I see nothing, as expected.
  1. If I have a featured image set, but the cover block doesn't have an image (just a color overlay), then the featured image toggle doesn't work in the editor or the frontend:

Screenshot 2022-03-25 at 19 09 51

  1. If I set the cover to use a featured image, but then remove the featured image from the the editor still remembers the featured image:

Screenshot 2022-03-25 at 19 11 39

This works fine in the frontend

@draganescu
Copy link
Contributor Author

draganescu commented Mar 27, 2022

If I don't have a featured image, when I hit the featured image toggle, I still see my selected image, not an empty image placeholder, in the editor:

I would not want to implement a placeholder as that would also need to implement setting a featured image from the cover block. What other behavior would be good I wonder? Or maybe "just" a placeholder, w/o the upload thing on top, that could work.

If I set the cover to use a featured image, but then remove the featured image from the the editor still remembers the featured image:

I think this is a feature 😆 , the block retains the image but loses the behavior. Is that so unexpected?

If I have a featured image set, but the cover block doesn't have an image (just a color overlay), then the featured image toggle doesn't work in the editor or the frontend:

  • I need to copy the opacity setting behavior which is set to 50% when an image is selected.

@draganescu draganescu force-pushed the add/cover-featured-image-background branch from ce012b3 to dd6e0eb Compare March 27, 2022 12:55
@scruffian
Copy link
Contributor

I would not want to implement a placeholder as that would also need to implement setting a featured image from the cover block. What other behavior would be good I wonder? Or maybe "just" a placeholder, w/o the upload thing on top, that could work.

I'm not sure what the best placeholder should be, but if I set the cover to use featured image, and there isn't one set then I would not expect to see the original image - I'd expect to see something that shows me that I haven't set a featured image - otherwise the function of the button isn't clear.

If I set the cover to use a featured image, but then remove the featured image from the the editor still remembers the featured image:
I think this is a feature 😆 , the block retains the image but loses the behavior. Is that so unexpected?

Yeah it is unexpected because the frontend doesn't match the backend. If the featured image is removed then we should remove it from the block as well.

@scruffian
Copy link
Contributor

This is looking great. I retested and everything works as I expected. I did find a strange bug with clearing media:

coverclear.mp4

I don't think this needs to be addressed before we merge though.

Copy link
Contributor

@scruffian scruffian left a comment

Choose a reason for hiding this comment

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

A few nitpicks but this LGTM

@navigatrum
Copy link
Contributor

navigatrum commented May 4, 2022

When I set the featured image cover block in a template file, the featured image doesn't show. If then I trigger a save (without any edit) from the site editor, overwriting the template with the same code, everything works as expected.

wp-cover-featured.mp4

[Edit: since for some reasons the first part of the above embedded video is suffering from the same problem of the featured image, this is the url: https://user-images.githubusercontent.com/6989338/166814081-c1c88127-1605-406c-8b16-093e4add151c.mp4]

The template file I'm using in the video, in a Twenty Twentytwo child theme, is single.html from Archeo theme: https://themes.trac.wordpress.org/browser/archeo/1.0.6/templates/single.html
Without the lines 14-16 with the featured image, and adding useFeaturedImage":true and "dimRatio":50 to the cover block. So the cover block is:

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"overlayColor":"foreground","minHeight":80,"minHeightUnit":"vh","contentPosition":"center left","style":{"spacing":{"padding":{"top":"min(4vw, 90px)","right":"min(4vw, 90px)","bottom":"min(4vw, 90px)","left":"min(4vw, 90px)"}}}} -->

(I've also tried with an Archeo child theme...same behavior)

@scruffian
Copy link
Contributor

I think the issue here is that these two themes use a solid color for the overlay in the cover block, so the featured image is there, but its hidden behind the overlay. You can see this in Archeo with the has-background-dim-100 class, which gets removed on save. If you remove this class you should see the same result.

@navigatrum
Copy link
Contributor

navigatrum commented May 5, 2022

@scruffian I checked the generated html. The image is not there.

Edit:

<div class="wp-container-5 wp-block-column is-vertically-aligned-bottom"
    style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">

    <div class="wp-block-cover has-custom-content-position is-position-center-left"
        style="padding-top:min(4vw, 90px);padding-right:min(4vw, 90px);padding-bottom:min(4vw, 90px);padding-left:min(4vw, 90px);min-height:80vh">
        <span aria-hidden="true"
            class="wp-block-cover__background has-foreground-background-color has-background-dim"></span>
        <div class="wp-block-cover__inner-container">
            <div style="text-transform:uppercase;" class="wp-block-post-date"><time
                    datetime="2022-05-04T13:32:49+00:00">May 4, 2022</time></div>

            <h1 style="text-transform:uppercase;" class="wp-block-post-title has-huge-font-size">Private: Hello</h1>
        </div>
    </div>

</div>
<div class="wp-container-5 wp-block-column is-vertically-aligned-bottom"
    style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
    
    <div class="wp-block-cover has-custom-content-position is-position-center-left"
        style="padding-top:min(4vw, 90px);padding-right:min(4vw, 90px);padding-bottom:min(4vw, 90px);padding-left:min(4vw, 90px);min-height:80vh">
        <span aria-hidden="true"
            class="wp-block-cover__background has-foreground-background-color has-background-dim"></span><img
            class="wp-block-cover__image-background" alt=""
            src="https://example.com/wp-content/uploads/2022/05/beach-resort-1395730.jpg"
            style="object-position: " data-object-fit="cover" data-object-position="">
        <div class="wp-block-cover__inner-container">
            <div style="text-transform:uppercase;" class="wp-block-post-date"><time
                    datetime="2022-05-04T13:32:49+00:00">May 4, 2022</time></div>

            <h1 style="text-transform:uppercase;" class="wp-block-post-title has-huge-font-size">Private: Hello</h1>
        </div>
    </div>
</div>

@spacedmonkey
Copy link
Member

Sorry if I am late to this. In get_the_post_thumbnail, it primes caches by calling update_post_thumbnail_cache.

https://github.com/WordPress/wordpress-develop/blob/0a136d072ac2326c3452055fed4f36c7f51b8151/src/wp-includes/post-thumbnail-template.php#L185-L187

I believe we need to ensure that this is done here as well. CC @draganescu

@scruffian
Copy link
Contributor

@navigatrum what is the code you are using in your template file?

@navigatrum
Copy link
Contributor

@scruffian

<!-- wp:template-part {"slug":"header","tagName":"header","theme":"tt2-child"} /-->

<!-- wp:group {"tagName":"main"} -->
<main class="wp-block-group">
    <!-- wp:columns {"align":"full","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}},"backgroundColor":"foreground","textColor":"background"} -->
    <div class="wp-block-columns alignfull has-background-color has-foreground-background-color has-text-color has-background"
        style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
        <!-- wp:column {"verticalAlignment":"bottom","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
        <div class="wp-block-column is-vertically-aligned-bottom"
            style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
            <!-- wp:cover {"useFeaturedImage":true,"dimRatio":50,"overlayColor":"foreground","minHeight":80,"minHeightUnit":"vh","contentPosition":"center left","style":{"spacing":{"padding":{"top":"min(4vw, 90px)","right":"min(4vw, 90px)","bottom":"min(4vw, 90px)","left":"min(4vw, 90px)"}}}} -->
            <div class="wp-block-cover has-custom-content-position is-position-center-left"
                style="padding-top:min(4vw, 90px);padding-right:min(4vw, 90px);padding-bottom:min(4vw, 90px);padding-left:min(4vw, 90px);min-height:80vh">
                <span aria-hidden="true"
                    class="wp-block-cover__background has-foreground-background-color has-background-dim"></span>
                <div class="wp-block-cover__inner-container">
                    <!-- wp:post-date {"style":{"typography":{"textTransform":"uppercase"}}} /-->

                    <!-- wp:post-title {"level":1,"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"huge"} /-->
                </div>
            </div>
            <!-- /wp:cover -->
        </div>
        <!-- /wp:column -->
    </div>
    <!-- /wp:columns -->

    <!-- wp:spacer {"height":"48px"} -->
    <div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->

    <!-- wp:post-content {"layout":{"inherit":true}} /-->

    <!-- wp:spacer {"height":"32px"} -->
    <div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer -->

    <!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}}},"backgroundColor":"foreground","textColor":"background","layout":{"inherit":true}} -->
    <div
        class="wp-block-group alignfull has-background-color has-foreground-background-color has-text-color has-background has-link-color">
        <!-- wp:spacer -->
        <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
        <!-- /wp:spacer -->

        <!-- wp:group {"style":{"spacing":{"blockGap":"4px"}},"layout":{"type":"flex","allowOrientation":false}} -->
        <div class="wp-block-group">
            <!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} -->
            <p class="has-small-font-size" style="text-transform:uppercase">Categories:</p>
            <!-- /wp:paragraph -->

            <!-- wp:post-terms {"term":"category","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /-->

            <!-- wp:paragraph {"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} -->
            <p class="has-small-font-size" style="text-transform:uppercase">· Tagged:</p>
            <!-- /wp:paragraph -->

            <!-- wp:post-terms {"term":"post_tag","style":{"typography":{"textTransform":"uppercase"}},"fontSize":"small"} /-->
        </div>
        <!-- /wp:group -->

        <!-- wp:spacer {"height":"48px"} -->
        <div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>
        <!-- /wp:spacer -->

        <!-- wp:columns {"isStackedOnMobile":false,"align":"wide","style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"}}}} -->
        <div class="wp-block-columns alignwide is-not-stacked-on-mobile"
            style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px">
            <!-- wp:column -->
            <div class="wp-block-column">
                <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
                <hr class="wp-block-separator has-css-opacity is-style-wide" />
                <!-- /wp:separator -->

                <!-- wp:post-navigation-link {"type":"previous","label":"Previous Post"} /-->
            </div>
            <!-- /wp:column -->

            <!-- wp:column -->
            <div class="wp-block-column">
                <!-- wp:separator {"opacity":"css","className":"is-style-wide"} -->
                <hr class="wp-block-separator has-css-opacity is-style-wide" />
                <!-- /wp:separator -->

                <!-- wp:post-navigation-link {"textAlign":"right","label":"Next Post"} /-->
            </div>
            <!-- /wp:column -->
        </div>
        <!-- /wp:columns -->

        <!-- wp:spacer {"height":"48px"} -->
        <div style="height:48px" aria-hidden="true" class="wp-block-spacer"></div>
        <!-- /wp:spacer -->

        <!-- wp:post-comments /-->

        <!-- wp:spacer -->
        <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
        <!-- /wp:spacer -->
    </div>
    <!-- /wp:group -->
</main>
<!-- /wp:group -->



<!-- wp:template-part {"slug":"footer","theme":"coccalab-theme","tagName":"footer"} /-->

@scruffian
Copy link
Contributor

Ah I found the problem. In the server side render we do this:

		$content = str_replace(
			'</span><div',
			'</span>' . $image . '<div',
			$content
		);

If you change the structure of the markup (for example moving the div to a new line) then this no longer works. @draganescu should we strip the white space before we do the replace?

@navigatrum
Copy link
Contributor

Ah I found the problem. In the server side render we do this:

		$content = str_replace(
			'</span><div',
			'</span>' . $image . '<div',
			$content
		);

If you change the structure of the markup (for example moving the div to a new line) then this no longer works. @draganescu should we strip the white space before we do the replace?

👍

		$content = str_replace(
			'</span><div',
			'</span>' . $image . '<div',
			preg_replace( '/>(\s)+</m', '><', $content )
		);

would solve the problem

@scruffian
Copy link
Contributor

@navigatrum do you want to open a PR?

navigatrum added a commit to navigatrum/gutenberg that referenced this pull request May 5, 2022
Follows on from [WordPress#39658]( WordPress#39658)
Remove whitespaces from html tags generated by `render_block_core_covermarkup` before injecting the featured image
@paaljoachim
Copy link
Contributor

paaljoachim commented May 8, 2022

Testing
Gutenberg plugin 13.1.

Exploring....
Screenshot 2022-05-08 at 13 08 28

Adding the Cover block and clicking Use featured image. If I have not added a featured image to the post then the Cover block shows a blank area.

Screenshot 2022-05-08 at 13 20 53

I am thinking that this feature can work both ways. Click the icon to add the current Cover block image as a featured image if there is no featured image already added to the post.

If the user has already added a featured image then that will be added to the Cover block.

@draganescu
Copy link
Contributor Author

Yes @paaljoachim this is a good way forward. Perhaps a new issue to easily track progress, if one does not already exist, could work? 🙏🏻

@spacedmonkey
Copy link
Member

Was this tested with #40853 @paaljoachim

@nextgenthemes
Copy link

Is there supposed to be a UI for sizeSlug ? Because I do not have it.

Also, the isDark attribute removed when enabling a featured image that results in the undesired .is-light class that triggers back text instead of white text. Not sure how this mechanic works, but I guess it's detected with JS based on the image that is selected as featured image and the colors are analyzed. I think I had a very light image recently, and it decided to make the text black.

Playing around with this, I may be wrong, assuming it does any detection of image colors, actually. Turns out when I select black color for the overlay the isDark gets triggered even when I set the overlay to 0 but I have to do this when enabling featured image to keep the text white. This should not be. Maybe there can even a PHP detection of the image colors that enables black text when the featured image is really bright all over. I use a dark text shadow for that case.

adamziel added a commit that referenced this pull request Jun 27, 2022
Stopgap solution to remove whitespaces from html tags generated by render_block_core_covermarkup before injecting the featured image.

Follows on from [#39658]( #39658).
Remove whitespaces from html tags generated by `render_block_core_covermarkup` before injecting the featured image.

For the block layout see: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/cover/edit/index.js#L327-L367
For the HTML tags capturing by class name see: https://github.com/WordPress/gutenberg/blob/51db4bf888e6b18cf9d18266108114d61070f3ad/lib/block-supports/layout.php#L232

Co-authored-by: Adam Zielinski <adam@adamziel.com>
adamziel added a commit that referenced this pull request Jun 30, 2022
Stopgap solution to remove whitespaces from html tags generated by render_block_core_covermarkup before injecting the featured image.

Follows on from [#39658]( #39658).
Remove whitespaces from html tags generated by `render_block_core_covermarkup` before injecting the featured image.

For the block layout see: https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/cover/edit/index.js#L327-L367
For the HTML tags capturing by class name see: https://github.com/WordPress/gutenberg/blob/51db4bf888e6b18cf9d18266108114d61070f3ad/lib/block-supports/layout.php#L232

Co-authored-by: Adam Zielinski <adam@adamziel.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Enhancement A suggestion for improvement.
Projects
No open projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Add option to set as feature image to image / cover block