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.

Sign up for GitHub

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

Archeo: Add pattern 6 #5487

Merged
merged 10 commits into from
Feb 14, 2022
Merged

Archeo: Add pattern 6 #5487

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
778de9e
Archeo: Add pattern 6
scruffian Feb 9, 2022
fe4fb51
add translation
scruffian Feb 9, 2022
d0fb68f
update text alignment and add background color
scruffian Feb 9, 2022
f340563
Apply padding to columns that are alignfull and have a background.
jffng Feb 9, 2022
263d474
Try fixing block validation error
mikachan Feb 9, 2022
45cb46d
Merge branch 'trunk' into add/pattern-6
mikachan Feb 10, 2022
bbb45ca
Merge branch 'trunk' into add/pattern-6
mikachan Feb 10, 2022
74bfa70
Target columns with background in the editor for alignment styles.
jffng Feb 10, 2022
8ff2fe7
Merge branch 'add/pattern-6' of github.com:Automattic/themes into add…
jffng Feb 10, 2022
88fcf8e
remove alignment rule
scruffian Feb 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added archeo/assets/images/palais-du-gouverneur.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions archeo/inc/block-patterns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ function archeo_register_block_patterns() {
'image-with-headline-and-description',
'image-with-description',
'layered-images-with-headline',
'image-with-description-and-right-aligned-headline',
'layout-with-two-images-and-text',
);

Expand Down
33 changes: 33 additions & 0 deletions archeo/inc/patterns/image-with-description-and-right-aligned-headline.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<?php
/**
* Image with description and right-aligned headline
*/
return array(
'title' => __( 'Image with description and right-aligned headline', 'archeo' ),
'categories' => array( 'pages' ),
'content' => '<!-- wp:columns {"align":"full","backgroundColor":"background"} -->
<div class="wp-block-columns alignfull has-background-background-color has-background"><!-- wp:column {"width":"33.33%"} -->
<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:cover {"overlayColor":"background","minHeight":670,"contentPosition":"bottom center","isDark":false} -->
<div class="wp-block-cover is-light has-custom-content-position is-position-bottom-center" style="min-height:670px"><span aria-hidden="true" class="has-background-background-color has-background-dim-100 wp-block-cover__gradient-background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:heading {"textAlign":"right","level":3,"style":{"typography":{"textTransform":"uppercase"}},"fontSize":"large"} -->
<h3 class="has-text-align-right has-large-font-size" id="palais-du-gouverneur-a-uxmal-detail-de-la-porte-principale-1" style="text-transform:uppercase">' . esc_html__( 'Palais Du Gouverneur, à Uxmal, detail de la Porte Principale', 'archeo' ). '</h3>
<!-- /wp:heading --></div></div>
<!-- /wp:cover --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"66.66%"} -->
<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:cover {"url":"' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-gouverneur.png","dimRatio":0,"minHeight":600,"isDark":false} -->
<div class="wp-block-cover is-light" style="min-height:600px"><span aria-hidden="true" class="has-background-dim-0 wp-block-cover__gradient-background has-background-dim"></span><img class="wp-block-cover__image-background" alt="' . esc_attr__( 'Palais Du Gouverneur, à Uxmal, detail de la Porte Principale', 'archeo' ). '" src="' . esc_url( get_template_directory_uri() ) . '/assets/images/palais-du-gouverneur.png" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:paragraph {"textColor":"primary","fontSize":"small"} -->
<p class="has-primary-color has-text-color has-small-font-size">' . esc_html__( 'Photograph by Désiré Charnay, 1862 – 1863', 'archeo' ) . '</p>
mikachan marked this conversation as resolved.
Show resolved Hide resolved
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>' . esc_html__( 'Uxmal is an ancient Maya city located in present-day Mexico. It is considered one of the most important sites of Maya culture.', 'archeo' ) . '</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->',
);
1 change: 1 addition & 0 deletions archeo/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ body > .is-root-container,
.edit-post-visual-editor__post-title-wrapper,
.wp-block-group.alignfull,
.wp-block-group.has-background,
.wp-block-columns.alignfull.has-background,
Copy link
Contributor

Choose a reason for hiding this comment

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

I added this rule because without it, Gutenberg's default padding for columns with a background color is applying and messing up the alignment:

Before After
Screen Shot 2022-02-09 at 12 50 55 PM Screen Shot 2022-02-09 at 12 50 40 PM

Copy link
Member Author

Choose a reason for hiding this comment

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

We should probably bubble this change up to TT2, Blockbase, Stewart and Livro.

Copy link
Contributor

Choose a reason for hiding this comment

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

The padding in the editor is a little too intense — not sure why that doesn't match?
Screen Shot 2022-02-10 at 11 22 12 AM

Copy link
Contributor

Choose a reason for hiding this comment

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

I missed the equivalent rule for targeting the editor. I added it here: 74bfa70#diff-2769b329cf3d32aab10e3f345c0da915cd1f6d5ffba70ebdeb7c5786597dca3dR119

Do you think these additions make sense? We are saying, "apply the site wide padding and negative margins for columns that are aligned full with a background color".

Copy link
Member

Choose a reason for hiding this comment

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

Do you think these additions make sense?

Yeah I think this makes sense, especially with the background color applied. Interested to see what anyone else thinks though, in case we're missing something.

Copy link
Contributor

Choose a reason for hiding this comment

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

I think it makes sense. But maybe break this out into a separate PR and more thoroughly test it against other themes?

.wp-block-cover.alignfull,
.is-root-container .wp-block[data-align='full'] > .wp-block-group,
.is-root-container .wp-block[data-align='full'] > .wp-block-cover {
Expand Down