-
Notifications
You must be signed in to change notification settings - Fork 2
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.
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
Add "Image on the left, description on the right" pattern #22
Add "Image on the left, description on the right" pattern #22
Conversation
Add "Image on the left, description on the right" pattern from woocommerce#5
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've left some inline comments below, where the image src
URLs need to be changed to point to the assets directory.
<!-- wp:group {"metadata":{"name":"Image on the left, description on the right"},"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"layout":{"type":"default"}} --> | ||
<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0"><!-- wp:columns {"align":"wide","className":"is-style-default","style":{"spacing":{"blockGap":{"left":"0"}}}} --> | ||
<div class="wp-block-columns alignwide is-style-default"><!-- wp:column {"verticalAlignment":"center","width":"50%"} --> | ||
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:cover {"url":"https://kiri.mystagingwebsite.com/wp-content/uploads/2025/02/pattern-ceramic-decoration.jpg","id":417,"dimRatio":0,"customOverlayColor":"#dedede","isUserOverlayColor":false,"isDark":false,"sizeSlug":"full","style":{"dimensions":{"aspectRatio":"4/3"}},"layout":{"type":"default"}} --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This src
attribute needs to be updated to point to the themes assets directory (example: <?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/pattern-ceramic-decoration.jpg
) before merging.
<div class="wp-block-group alignfull" style="margin-top:0;margin-bottom:0"><!-- wp:columns {"align":"wide","className":"is-style-default","style":{"spacing":{"blockGap":{"left":"0"}}}} --> | ||
<div class="wp-block-columns alignwide is-style-default"><!-- wp:column {"verticalAlignment":"center","width":"50%"} --> | ||
<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:cover {"url":"https://kiri.mystagingwebsite.com/wp-content/uploads/2025/02/pattern-ceramic-decoration.jpg","id":417,"dimRatio":0,"customOverlayColor":"#dedede","isUserOverlayColor":false,"isDark":false,"sizeSlug":"full","style":{"dimensions":{"aspectRatio":"4/3"}},"layout":{"type":"default"}} --> | ||
<div class="wp-block-cover is-light"><img class="wp-block-cover__image-background wp-image-417 size-full" alt="" src="https://kiri.mystagingwebsite.com/wp-content/uploads/2025/02/pattern-ceramic-decoration.jpg" data-object-fit="cover"/><span aria-hidden="true" class="wp-block-cover__background has-background-dim-0 has-background-dim" style="background-color:#dedede"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} --> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same as above.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thank you! 🚀
Add "Image on the left, description on the right" pattern from #5