Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Store Customization > Update aspect ratio, icons and default text for the Social: Follow us on social media pattern #11161

Merged
merged 20 commits into from
Oct 6, 2023
Merged

Store Customization > Update aspect ratio, icons and default text for the Social: Follow us on social media pattern #11161

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
7162c62
Add titles to patterns and set the aligment to Wide
albarin Oct 4, 2023
1a7b913
Replace product query patterns with product collection ones
albarin Oct 5, 2023
fbcfba6
Add group and spacing to the 3-cols and social patterns
albarin Oct 5, 2023
201a4a1
Fix alignment issue in the testimonals 3 in the editor
albarin Oct 5, 2023
47ed7b5
Add padding to the featured catergory triple pattern
albarin Oct 5, 2023
15092ef
Remove pagination and no results query from product query patterns
albarin Oct 5, 2023
2babc54
Add aspect ratio to the product image attributes
albarin Oct 5, 2023
5938f95
Add portrait aspect ratio to product X column and product gallery pat…
albarin Oct 5, 2023
0210881
Fix PHP warning and remove the padding for the Testimonials 3 Columns…
nefeline Oct 6, 2023
8628464
Ensure the Just Arrived Full Hero pattern can have an AI managed imag…
nefeline Oct 6, 2023
117809a
Add background dim
nefeline Oct 6, 2023
fd7b803
Update dim to 30
nefeline Oct 6, 2023
9d52fef
Add aspect ratio to the Social: Follow us on social media
nefeline Oct 6, 2023
b72211c
Update the icons color to primary
nefeline Oct 6, 2023
63bfbed
Update the default title for the Follow us on social media pattern wi…
nefeline Oct 6, 2023
520670c
Merge branch 'trunk' into fix/testimonials-pattern
nefeline Oct 6, 2023
792f21d
Update text for the main header.
nefeline Oct 6, 2023
fdb9b1d
Merge branch 'fix/testimonials-pattern' into fix/ensure-ai-generated-…
nefeline Oct 6, 2023
9ab88f7
Merge branch 'fix/ensure-ai-generated-image-is-displayed-on-just-arri…
nefeline Oct 6, 2023
0db4f72
Merge branch 'trunk' into add/aspect-ratio-to-follow-us-on-social-med…
nefeline Oct 6, 2023
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
20 changes: 11 additions & 9 deletions patterns/just-arrived-full-hero.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,31 @@
$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/just-arrived-full-hero' );
$images = PatternsHelper::get_pattern_images( 'woocommerce-blocks/just-arrived-full-hero' );

$image1 = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/plant-in-vase.jpg' );
$pattern_title = $content['titles'][0]['default'] ?? '';
$pattern_description = $content['descriptions'][0]['default'] ?? '';
$pattern_button = $content['buttons'][0]['default'] ?? '';
$pattern_image = PatternsHelper::get_image_url( $images, 0, 'images/pattern-placeholders/plant-in-vase.jpg' );
?>

<!-- wp:cover {"url":"<?php echo esc_url( $image1 ); ?>","dimRatio":0,"minHeight":739,"contentPosition":"center right","isDark":false,"align":"wide","style":{"spacing":{"padding":{"right":"4em"}}}} -->
<div class="wp-block-cover alignwide is-light has-custom-content-position is-position-center-right" style="padding-right:4em;min-height:739px">
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim"></span>
<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $image1 ); ?>" data-object-fit="cover"/>
<!-- wp:cover {"url":"<?php echo esc_url( $pattern_image ); ?>","dimRatio":30,"minHeight":739,"contentPosition":"center right","align":"wide","style":{"spacing":{"padding":{"right":"4em"}}}} -->
<div class="wp-block-cover alignwide has-custom-content-position is-position-center-right" style="padding-right:4em;min-height:739px">
<span aria-hidden="true" class="wp-block-cover__background has-background-dim-30 has-background-dim"></span>
<img class="wp-block-cover__image-background" alt="" src="<?php echo esc_url( $pattern_image ); ?>" data-object-fit="cover"/>
<div class="wp-block-cover__inner-container">
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:heading {"anchor":"just-arrived"} -->
<h2 class="wp-block-heading" id="just-arrived"><?php echo esc_html( $content['titles'][0]['default'] ); ?></h2>
<h2 class="wp-block-heading" id="just-arrived"><?php echo esc_html( $pattern_title ); ?></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
<p><?php echo esc_html( $pattern_description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons">
<!-- wp:button -->
<div class="wp-block-button">
<a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>"><?php echo esc_html( $content['buttons'][0]['default'] ); ?></a>
<a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( get_permalink( wc_get_page_id( 'shop' ) ) ); ?>"><?php echo esc_html( $pattern_button ); ?></a>
</div>
<!-- /wp:button -->
</div>
Expand Down
18 changes: 9 additions & 9 deletions patterns/social-follow-us-in-social-media.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@

<!-- wp:column {"verticalAlignment":"center","width":"25%"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:25%">
<!-- wp:social-links {"iconColor":"contrast","openInNewTab":true,"style":{"spacing":{"blockGap":{"top":"0"}}},"className":"is-style-logos-only","layout":{"type":"flex","justifyContent":"space-between","orientation":"horizontal"}} -->
<!-- wp:social-links {"iconColor":"primary","openInNewTab":true,"style":{"spacing":{"blockGap":{"top":"0"}}},"className":"has-icon-color is-style-logos-only","layout":{"type":"flex","justifyContent":"space-between","orientation":"horizontal"}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only">
<!-- wp:social-link {"url":"<?php echo esc_url( 'https://twitter.com/' ); ?>","service":"twitter"} /-->

Expand All @@ -48,39 +48,39 @@
<div class="wp-block-columns alignwide" style="margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
<img src="<?php echo esc_url( $image1 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 1 out of 4.', 'woo-gutenberg-products-block' ); ?>" />
<img src="<?php echo esc_url( $image1 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 1 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover"/>
</figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
<img src="<?php echo esc_url( $image2 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 2 out of 4.', 'woo-gutenberg-products-block' ); ?>" />
<img src="<?php echo esc_url( $image2 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 2 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover"/>
</figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
<img src="<?php echo esc_url( $image3 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 3 out of 4.', 'woo-gutenberg-products-block' ); ?>" />
<img src="<?php echo esc_url( $image3 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 3 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover"/>
</figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:image {"sizeSlug":"large","linkDestination":"none"} -->
<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
<img src="<?php echo esc_url( $image4 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 4 out of 4.', 'woo-gutenberg-products-block' ); ?>" />
<img src="<?php echo esc_url( $image4 ); ?>" alt="<?php esc_attr_e( 'Placeholder image used to represent products being showcased under the social media icons. 4 out of 4.', 'woo-gutenberg-products-block' ); ?>" style="aspect-ratio:1;object-fit:cover"/>
</figure>
<!-- /wp:image -->
</div>
Expand Down
23 changes: 16 additions & 7 deletions patterns/testimonials-3-columns.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,33 @@
*/

use Automattic\WooCommerce\Blocks\Patterns\PatternsHelper;

$content = PatternsHelper::get_pattern_content( 'woocommerce-blocks/testimonials-3-columns' );

$main_header = $content['titles'][0]['default'] ?? '';
$first_title = $content['titles'][1]['default'] ?? '';
$second_title = $content['titles'][2]['default'] ?? '';
$third_title = $content['titles'][3]['default'] ?? '';
$first_description = $content['descriptions'][0]['default'] ?? '';
$second_description = $content['descriptions'][1]['default'] ?? '';
$third_description = $content['descriptions'][2]['default'] ?? '';
?>
<!-- wp:group {"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}},"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30)">
<!-- wp:heading {"level":3,"style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<h3 class="wp-block-heading" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><?php echo esc_html( $content['titles'][3]['default'] ); ?></h3>
<h3 class="wp-block-heading" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><?php echo esc_html( $main_header ); ?></h3>
<!-- /wp:heading -->

<!-- wp:columns {"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<div class="wp-block-columns alignfull" style="padding-right:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p><strong><?php echo esc_html( $content['titles'][0]['default'] ); ?></strong></p>
<p><strong><?php echo esc_html( $first_title ); ?></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $content['descriptions'][0]['default'] ); ?></p>
<p><?php echo esc_html( $first_description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
Expand All @@ -36,11 +45,11 @@
<div class="wp-block-column">
<!-- wp:paragraph -->

<p><strong><?php echo esc_html( $content['titles'][1]['default'] ); ?></strong></p>
<p><strong><?php echo esc_html( $second_title ); ?></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $content['descriptions'][1]['default'] ); ?></p>
<p><?php echo esc_html( $second_description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
Expand All @@ -52,11 +61,11 @@
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p><strong><?php echo esc_html( $content['titles'][2]['default'] ); ?></strong></p>
<p><strong><?php echo esc_html( $third_title ); ?></strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><?php echo esc_html( $content['descriptions'][2]['default'] ); ?></p>
<p><?php echo esc_html( $third_description ); ?></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
Expand Down
14 changes: 8 additions & 6 deletions src/Patterns/dictionary.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,6 +256,8 @@
{
"name": "Just Arrived Full Hero",
"slug": "woocommerce-blocks/just-arrived-full-hero",
"images_total": 1,
"images_format": "landscape",
"content": {
"titles": [
{
Expand Down Expand Up @@ -524,14 +526,14 @@
}
},
{
"name": "Social: Follow us in social media",
"name": "Social: Follow us on social media",
"slug": "woocommerce-blocks/social-follow-us-in-social-media",
"images_total": 4,
"images_format": "landscape",
"content": {
"titles": [
{
"default": "Follow us in social media",
"default": "Follow us on social media",
"ai_prompt": "An phrase that advertises the social media accounts"
}
]
Expand Down Expand Up @@ -584,6 +586,10 @@
"slug": "woocommerce-blocks/testimonials-3-columns",
"content": {
"titles": [
{
"default": "What our customers say",
"ai_prompt": "A title that advertises the set of testimonials"
},
{
"default": "Great experience",
"ai_prompt": "A title that advertises the first testimonial"
Expand All @@ -595,10 +601,6 @@
{
"default": "Awesome couch and great buying experience",
"ai_prompt": "A title that advertises the third testimonial"
},
{
"default": "What our customers say",
"ai_prompt": "A title that advertises the set of testimonials"
}
],
"descriptions": [
Expand Down
Loading