Testimonials Single Pattern > Update the image format and content width (https://github.com/woocommerce/woocommerce-blocks/pull/10600)

* Testimonials Single Pattern: Update the styles for the image and add and alt text.

* Update the layout type of the comlumn iwth the content to constrained and update padding to 32px for the columns wrapper.

* Vertical align image to the center.
This commit is contained in:
Patricia Hillebrandt 2023-08-17 17:28:58 +02:00 committed by GitHub
parent d46e286bf7
commit f88a7e984d
1 changed files with 9 additions and 7 deletions

View File

@ -5,17 +5,19 @@
* Categories: WooCommerce
*/
?>
<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"right":"20px","left":"20px"}}}} -->
<div class="wp-block-columns alignwide" style="padding-right:20px;padding-left:20px">
<!-- wp:column {"width":"160px"} -->
<div class="wp-block-column" style="flex-basis:160px">
<!-- wp:image {"align":"left","width":164,"height":164,"sizeSlug":"large","style":{"border":{"radius":"100%"}},"className":"is-style-rounded"} -->
<figure class="wp-block-image alignleft size-large is-resized has-custom-border is-style-rounded"><img src="https://s.w.org/images/core/5.8/portrait.jpg" alt="" style="border-radius:100%" width="164" height="164"/></figure>
<!-- wp:columns {"align":"wide","style":{"spacing":{"padding":{"right":"32px","left":"32px"}}}} -->
<div class="wp-block-columns alignwide" style="padding-right:32px;padding-left:32px">
<!-- wp:column {"verticalAlignment":"center","width":"160px"} -->
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:160px">
<!-- wp:image {"width":164,"className":"is-style-rounded"} -->
<figure class="wp-block-image is-resized is-style-rounded">
<img src="https://s.w.org/images/core/5.8/portrait.jpg" alt="<?php esc_attr_e( 'Placeholder image with the avatar of the user who is writing the testimonial.', 'woo-gutenberg-products-block' ); ?>" width="164"/>
</figure>
<!-- /wp:image -->
</div>
<!-- /wp:column -->
<!-- wp:column {"layout":{"type":"default"}} -->
<!-- wp:column {"layout":{"type":"constrained","justifyContent":"left"}} -->
<div class="wp-block-column">
<!-- wp:paragraph -->
<p><strong><?php esc_html_e( 'Great experience', 'woo-gutenberg-products-block' ); ?></strong></p>