Hero image with heading and two buttons

[alaczek]

This one basically recreates the Hero block from Coblocks, but thought I'd add it anyway since I had issues with that block (could not remove elements), and ended up having to re-do it from scratch.

<!-- wp:cover {"url":"https://gutenboardinghp3.files.wordpress.com/2020/03/annie-spratt-gbj3alj2uue-unsplash.jpg","id":35,"dimRatio":0,"align":"full"} -->
<div class="wp-block-cover alignfull" style="background-image:url(https://gutenboardinghp3.files.wordpress.com/2020/03/annie-spratt-gbj3alj2uue-unsplash.jpg)"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":400} -->
<div style="height:400px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":6,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":7,"className":"column1-desktop-grid__span-6 column1-desktop-grid__row-1 column1-tablet-grid__span-8 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-6 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading -->
<h2>Introduce yourself -- who you are, what you do, and where you are.</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","textColor":"primary","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-text-color has-primary-color has-background has-background-background-color">Explore Portfolio</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"background","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background-color">Read the Blog</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid --></div></div>
<!-- /wp:cover -->

[alaczek]

I had a hard time coming up with an image, with proper copy space, and not too busy (I was going for the portfolio vertical). Let me know what you think about it @iamtakashi, or if you have ideas for a different image.

...and updated code

<!-- wp:cover {"url":"https://gutenbaordinghp.files.wordpress.com/2020/03/abstract-1867838_1920-1.jpg","id":268,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.50"},"align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-10 has-background-dim" style="background-image:url(https://gutenbaordinghp.files.wordpress.com/2020/03/abstract-1867838_1920-1.jpg);background-position:50% 50%"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":350} -->
<div style="height:350px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":6,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":7,"className":"column1-desktop-grid__span-6 column1-desktop-grid__row-1 column1-tablet-grid__span-8 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-6 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading -->
<h2><strong>Introduce yourself -- who you are, what you do, and where you are.</strong></h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"background","textColor":"foreground-dark","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-text-color has-foreground-dark-color has-background has-background-background-color">Explore Portfolio</a></div>
<!-- /wp:button -->

<!-- wp:button {"textColor":"background","className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-text-color has-background-color">Read the Blog</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

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

[iamtakashi]

For the text: Maybe we can use one of the generic aspirational text on the doc that Editorial worked on?

For the colours: In this case, where the text sits on a particular background (image), we should specify all the colour so that the colours stay the same regardless of the activated theme. I can see you specified the colours for the buttons, but we should do for the header as well.

I've noticed this recently, but there is something we need to be careful when we specify colours — If we use one of the colours in the colour palette in the sidebar, the colour value in the markup will be the name of the colour, instead of the hex code of the colour. For example, we can see the following in your markup.

<!-- wp:button {"backgroundColor":"background","textColor":"foreground-dark","className":"is-style-fill"} -->

Notice the value of backgroundColor and textColor are the name of the colours. This is a problem when the background or foreground-dark is actually a dark colour in the activated theme. If I test this with Rivington, the block appears like this, and it's not ideal.

So instead, we should always use custom colours with a hex code so that it stays the same regardless of the theme.

<!-- wp:button {"customBackgroundColor":"#ffffff","customTextColor":"#000000","className":"is-style-fill"} -->

Lastly, do we need the spacer at the bottom? It threw me off a bit. And there is an empty paragraph tag in the markup as well.

[alaczek]

Maybe we can use one of the generic aspirational text on the doc that Editorial worked on?

I was thinking about it, but there was none for the introductory type of text I was going for. But in this case, I actually like it, as it's a popular pattern on portfolio websites, that goes like: "Hi, my name is Jane, I'm a freelance designer and photographer based in Portland, Oregon." Would something concrete like that work better?

The spacer at the bottom is on purpose -- this is how it looks like without it. Personally I don't like how the buttons are sitting so close to the bottom border of the image:

Good thinking with the colors! Here's the code with colors hard-coded:

<!-- wp:cover {"url":"https://gutenboardinghp2.files.wordpress.com/2020/03/abstract-1867838_1920-1.jpg","id":303,"dimRatio":10,"focalPoint":{"x":"0.50","y":"0.50"},"align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim-10 has-background-dim" style="background-image:url(https://gutenboardinghp2.files.wordpress.com/2020/03/abstract-1867838_1920-1.jpg);background-position:50% 50%"><div class="wp-block-cover__inner-container"><!-- wp:spacer {"height":350} -->
<div style="height:350px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

<!-- wp:jetpack/layout-grid {"column1DesktopSpan":6,"column1TabletSpan":8,"column1MobileSpan":4,"column2DesktopOffset":7,"className":"column1-desktop-grid__span-6 column1-desktop-grid__row-1 column1-tablet-grid__span-8 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-6 column1-desktop-grid__row-1 column1-tablet-grid__span-8 column1-tablet-grid__row-1 column1-mobile-grid__span-4 column1-mobile-grid__row-1"><!-- wp:jetpack/layout-grid-column -->
<div class="wp-block-jetpack-layout-grid-column wp-block-jetpack-layout-grid__padding-none"><!-- wp:heading {"customTextColor":"#ffffff"} -->
<h2 class="has-text-color" style="color:#ffffff">Introduce yourself -- who you are, what you do, and where you are.</h2>
<!-- /wp:heading -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"customBackgroundColor":"#ffffff","customTextColor":"#000000","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-text-color has-background" style="background-color:#ffffff;color:#000000">Explore Portfolio</a></div>
<!-- /wp:button -->

<!-- wp:button {"customTextColor":"#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">Read the Blog</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:jetpack/layout-grid-column --></div>
<!-- /wp:jetpack/layout-grid -->

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

[iamtakashi]

Would something concrete like that work better?

I think so. And an image that connects and complements the text is going to make the pattern more "real".

[alaczek]

Finding an image with copy space where I need it is very hard, but I'll see what I can do. Then again if I'm having such problems with finding a suitable image, maybe the whole thing needs rethinking? After spending most of last week looking for images I don't know anymore :)

[alaczek]

Finding the right photo for this is going to be key. I'll give it a go this week, but I'll also time-box it, and if I can't find something I'm happy with I'm going to close this for now.