alaczek
commented
4 years ago 
Open alaczek opened 4 years ago
alaczek
commented
4 years ago
iamtakashi
commented
4 years ago I find the top part a bit strange — the black box seems to be shifted too much to the right?
Why do you need the column on the right?
Similar to #79, setting a minimum height for the cover block would be nice for this pattern too.
alaczek
commented
4 years ago the black box seems to be shifted too much to the right?
It is aligned with the "Subscribe" text below:
Why do you need the column on the right?
I don't :) I routinely forget that I can just set the layout grid to one column and not use all the available space. Fixed!
minimum height for the cover block would be nice for this pattern too.
Fixed as well.
<!-- wp:cover {"url":"https://podcast514691813.files.wordpress.com/2020/06/woman-in-red-dress-lying-on-brown-dried-leaves-on-ground-3769156.jpg","id":551,"dimRatio":10,"minHeight":600,"contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-10 has-background-dim is-position-center-center" style="background-image:url(https://podcast514691813.files.wordpress.com/2020/06/woman-in-red-dress-lying-on-brown-dried-leaves-on-ground-3769156.jpg);min-height:600px"><div class="wp-block-cover__inner-container"><!-- wp:jetpack/layout-grid {"gutterSize":"medium","column1DesktopSpan":5,"column1DesktopOffset":2,"column1TabletSpan":5,"column1MobileSpan":4,"column2DesktopSpan":5,"column2DesktopOffset":7,"column2TabletSpan":4,"column2TabletOffset":3,"column2MobileSpan":4,"column3DesktopOffset":1,"className":"column1-desktop-grid__span-5 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column1-tablet-grid__span-5 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-5 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column1-tablet-grid__span-5 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__medium"><!-- wp:jetpack/layout-grid-column {"customBackgroundColor":"#111111","padding":"huge","className":"padding-bottom-half"} -->
<div class="wp-block-jetpack-layout-grid-column padding-bottom-half wp-block-jetpack-layout-grid__padding-huge" style="background-color:#111111"><!-- wp:heading {"level":3,"className":"margin-bottom-none"} -->
<h3 class="margin-bottom-none">Words, books, friends podcast</h3>
<!-- /wp:heading -->
<!-- wp:coblocks/dynamic-separator {"customColor":"#515151","className":"is-style-fullwidth margin-top-none margin-bottom-none"} -->
<hr class="wp-block-coblocks-dynamic-separator has-background is-style-fullwidth margin-top-none margin-bottom-none" style="color:#515151;height:50px"/>
<!-- /wp:coblocks/dynamic-separator -->
<!-- wp:paragraph {"className":"margin-top-none margin-bottom-none"} -->
<p class="margin-top-none margin-bottom-none">Book reviews, discussions, and two friends who love talking about reading.</p>
<!-- /wp:paragraph -->
<!-- wp:coblocks/dynamic-separator {"customColor":"#515151","className":"is-style-fullwidth margin-top-none margin-bottom-none"} -->
<hr class="wp-block-coblocks-dynamic-separator has-background is-style-fullwidth margin-top-none margin-bottom-none" style="color:#515151;height:50px"/>
<!-- /wp:coblocks/dynamic-separator --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:cover -->
<!-- wp:group {"align":"full","style":{"color":{"background":"#ce4027","text":"#ffffff"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#ce4027;color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:jetpack/layout-grid {"column1DesktopSpan":2,"column1DesktopOffset":2,"column1TabletSpan":2,"column1MobileSpan":3,"column2DesktopSpan":6,"column2TabletSpan":6,"column2MobileSpan":4,"column2MobileOffset":1,"column3DesktopOffset":7,"column3TabletOffset":2,"className":"column1-desktop-grid__span-2 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column1-tablet-grid__span-2 column1-tablet-grid__row-1 column2-tablet-grid__span-6 column2-tablet-grid__start-3 column2-tablet-grid__row-1 column1-mobile-grid__span-3 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-2 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column1-tablet-grid__span-2 column1-tablet-grid__row-1 column2-tablet-grid__span-6 column2-tablet-grid__start-3 column2-tablet-grid__row-1 column1-mobile-grid__span-3 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"level":4,"style":{"color":{"text":"#ffffff"}}} -->
<h4 class="has-text-color" style="color:#ffffff">Subscribe</h4>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column -->
<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:buttons {"align":"right"} -->
<div class="wp-block-buttons alignright"><!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Apple</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Overcast</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Stitcher</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">RSS</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Spotify</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->
<!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->It is aligned with the "Subscribe" text below:
I'm not sure if they are necessary to be aligned. In my testing, they seem slightly off at the moment anyway (it's a nitpick and might be a theme bug).
I think the composition of the image is also contributing to the weight shift that makes the top part look unbalanced. It's a pity that the woman in the image is on really the edge. I assume you've looked for many images, but is there any alternative?
alaczek
commented
4 years ago I assume you've looked for many images, but is there any alternative?
Indeed I have :) The image is also tying in with the color of the subscribe section below, and the overall topic (books) AND the person is smiling. I pretty much hit the holy grail with this one ;) I do see what you mean about the balance of the overall composition, but if the woman wasn't on the edge, we'd be running into issues with her being too close or obscured by the box.
For example, take a look at this other image I found. While the overall composition feels better balanced, the thing that jumps out at me way more is how close the face is to the box.
iamtakashi
commented
4 years ago Yeah. If we keep the image of a woman with a red top, I think it would help to move (or widen) the black box to the left so that the "weight" is more balanced. I honestly don't think the black box needs to be aligned with the subscribe heading.
alaczek
commented
4 years ago Alright, I moved the box a little to the left (it was offset by two, and I changed it to one). This is as much as I can go though, as otherwise, it would be sticking to the left side and that doesn't feel balanced either:
<!-- wp:cover {"url":"https://blockpatterntest.files.wordpress.com/2020/07/woman-in-red-dress-lying-on-brown-dried-leaves-on-ground-3769156.jpg","id":286,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.50"},"minHeight":600,"contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-10 has-background-dim is-position-center-center" style="background-image:url(https://blockpatterntest.files.wordpress.com/2020/07/woman-in-red-dress-lying-on-brown-dried-leaves-on-ground-3769156.jpg);background-position:50% 50%;min-height:600px"><div class="wp-block-cover__inner-container"><!-- wp:jetpack/layout-grid {"gutterSize":"medium","column1DesktopSpan":5,"column1DesktopOffset":1,"column1TabletSpan":5,"column1MobileSpan":4,"column2DesktopSpan":5,"column2DesktopOffset":8,"column2TabletSpan":4,"column2TabletOffset":3,"column2MobileSpan":4,"column3DesktopOffset":1,"className":""} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column1-tablet-grid__span-5 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__medium"><!-- wp:jetpack/layout-grid-column {"customBackgroundColor":"#111111","padding":"huge","className":"padding-bottom-half"} -->
<div class="wp-block-jetpack-layout-grid-column padding-bottom-half wp-block-jetpack-layout-grid__padding-huge" style="background-color:#111111"><!-- wp:heading {"level":3,"className":"margin-bottom-none"} -->
<h3 class="margin-bottom-none">Words, books, friends podcast</h3>
<!-- /wp:heading -->
<!-- wp:coblocks/dynamic-separator {"customColor":"#515151","className":"is-style-fullwidth margin-top-none margin-bottom-none"} -->
<hr class="wp-block-coblocks-dynamic-separator has-background is-style-fullwidth margin-top-none margin-bottom-none" style="color:#515151;height:50px"/>
<!-- /wp:coblocks/dynamic-separator -->
<!-- wp:paragraph {"className":"margin-top-none margin-bottom-none"} -->
<p class="margin-top-none margin-bottom-none">Book reviews, discussions, and two friends who love talking about reading.</p>
<!-- /wp:paragraph -->
<!-- wp:coblocks/dynamic-separator {"customColor":"#515151","className":"is-style-fullwidth margin-top-none margin-bottom-none"} -->
<hr class="wp-block-coblocks-dynamic-separator has-background is-style-fullwidth margin-top-none margin-bottom-none" style="color:#515151;height:50px"/>
<!-- /wp:coblocks/dynamic-separator --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:cover -->
<!-- wp:group {"align":"full","style":{"color":{"background":"#ce4027","text":"#ffffff"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#ce4027;color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:jetpack/layout-grid {"column1DesktopSpan":2,"column1DesktopOffset":2,"column1TabletSpan":2,"column1MobileSpan":3,"column2DesktopSpan":6,"column2TabletSpan":6,"column2MobileSpan":4,"column2MobileOffset":1,"column3DesktopOffset":7,"column3TabletOffset":2,"className":"column1-desktop-grid__span-2 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column1-tablet-grid__span-2 column1-tablet-grid__row-1 column2-tablet-grid__span-6 column2-tablet-grid__start-3 column2-tablet-grid__row-1 column1-mobile-grid__span-3 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-2 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column1-tablet-grid__span-2 column1-tablet-grid__row-1 column2-tablet-grid__span-6 column2-tablet-grid__start-3 column2-tablet-grid__row-1 column1-mobile-grid__span-3 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"level":4,"style":{"color":{"text":"#ffffff"}}} -->
<h4 class="has-text-color" style="color:#ffffff">Subscribe</h4>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column -->
<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:buttons {"align":"right"} -->
<div class="wp-block-buttons alignright"><!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Apple</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Overcast</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Stitcher</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">RSS</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Spotify</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->
<!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->I think that has a better balance. The style of the separator seems broken in Twenty Twenty though. Yes, it's the theme's fault, but maybe better to avoid it?
alaczek
commented
4 years ago This is fixable if I switch to the other separator block. The only problem is if I use full-width style for some reason it's overflowing in the editor (but ok on the frontend):
But I think it's acceptable? What do you think?
Here's the updated code:
<!-- wp:cover {"url":"https://blockpatterntest.files.wordpress.com/2020/07/woman-in-red-dress-lying-on-brown-dried-leaves-on-ground-3769156.jpg","id":286,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.50"},"minHeight":600,"contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-10 has-background-dim is-position-center-center" style="background-image:url(https://blockpatterntest.files.wordpress.com/2020/07/woman-in-red-dress-lying-on-brown-dried-leaves-on-ground-3769156.jpg);background-position:50% 50%;min-height:600px"><div class="wp-block-cover__inner-container"><!-- wp:jetpack/layout-grid {"gutterSize":"medium","column1DesktopSpan":5,"column1DesktopOffset":1,"column1TabletSpan":5,"column1MobileSpan":4,"column2DesktopSpan":5,"column2DesktopOffset":8,"column2TabletSpan":4,"column2TabletOffset":3,"column2MobileSpan":4,"column3DesktopOffset":1,"className":"column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column1-tablet-grid__span-5 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-5 column1-desktop-grid__start-2 column1-desktop-grid__row-1 column1-tablet-grid__span-5 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1 wp-block-jetpack-layout-gutter__medium"><!-- wp:jetpack/layout-grid-column {"customBackgroundColor":"#111111","padding":"huge"} -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-huge" style="background-color:#111111"><!-- wp:heading {"level":3,"className":"margin-bottom-none"} -->
<h3 class="margin-bottom-none">Words, books, friends podcast</h3>
<!-- /wp:heading -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"className":"margin-top-none margin-bottom-none"} -->
<p class="margin-top-none margin-bottom-none">Book reviews, discussions, and two friends who love talking about reading.</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide"} -->
<hr class="wp-block-separator is-style-wide"/>
<!-- /wp:separator --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:cover -->
<!-- wp:group {"align":"full","style":{"color":{"background":"#ce4027","text":"#ffffff"}}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="background-color:#ce4027;color:#ffffff"><div class="wp-block-group__inner-container"><!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:jetpack/layout-grid {"column1DesktopSpan":2,"column1DesktopOffset":2,"column1TabletSpan":2,"column1MobileSpan":3,"column2DesktopSpan":6,"column2TabletSpan":6,"column2MobileSpan":4,"column2MobileOffset":1,"column3DesktopOffset":7,"column3TabletOffset":2,"className":"column1-desktop-grid__span-2 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column1-tablet-grid__span-2 column1-tablet-grid__row-1 column2-tablet-grid__span-6 column2-tablet-grid__start-3 column2-tablet-grid__row-1 column1-mobile-grid__span-3 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"} -->
<div class="wp-block-jetpack-layout-grid alignfull column1-desktop-grid__span-2 column1-desktop-grid__start-3 column1-desktop-grid__row-1 column2-desktop-grid__span-6 column2-desktop-grid__start-5 column2-desktop-grid__row-1 column1-tablet-grid__span-2 column1-tablet-grid__row-1 column2-tablet-grid__span-6 column2-tablet-grid__start-3 column2-tablet-grid__row-1 column1-mobile-grid__span-3 column1-mobile-grid__row-1 column2-mobile-grid__span-4 column2-mobile-grid__row-2"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"level":4,"style":{"color":{"text":"#ffffff"}}} -->
<h4 class="has-text-color" style="color:#ffffff">Subscribe</h4>
<!-- /wp:heading --></div>
<!-- /wp:jetpack/layout-grid-column -->
<!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Apple</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Overcast</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Stitcher</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">RSS</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"text":"#ffffff"}},"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color" style="color:#ffffff">Spotify</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->
<!-- wp:spacer {"height":10} -->
<div style="height:10px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div></div>
<!-- /wp:group -->
pablohoneyhoney
commented
4 years ago