Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Product Gallery: Simplify the Product Gallery Pop-up (#42797) 

* Product Gallery Pop-up: Simplify the pop-up for v1

* Product Gallery Pop-up: Update the Product Gallery template part contents

* Product Gallery Pop-up: Add changelog entry

* Product Gallery: Fix CSS linting errors

* Product Gallery Pop-up: Add an additional changelog entry

* Product Gallery Pop-up: Update changelog message

* Product Gallery Pop-up: Fix logic error
This commit is contained in:
Daniel Dudzic 2023-12-20 19:03:01 +01:00 committed by GitHub
parent 0ba8f7848d
commit 7122669d44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 126 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
plugins/woocommerce-blocks/assets/js/blocks/product-gallery/inner-blocks/product-gallery-large-image-next-previous/icons.tsx
View File

@ -124,32 +124,34 @@ export const PrevButtonInsideImage = () => (
export const NextButtonOutsideImage = () => (
<SVG
width="22"
height="38"
viewBox="0 0 22 38"
width="10"
height="16"
viewBox="0 0 10 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={ `wc-block-product-gallery-large-image-next-previous-right--outside-image` }
>
<path
d="M4.56666 0L0.766663 3.16667L15.3333 19L0.766663 34.8333L4.56666 38L21.6667 19L4.56666 0Z"
fill="black"
d="M1 1.28516L8 8.28516L1 15.2852"
stroke="black"
strokeWidth="1.5"
/>
</SVG>
);
export const PrevButtonOutsideImage = () => (
<SVG
width="22"
height="38"
viewBox="0 0 22 38"
width="10"
height="16"
viewBox="0 0 10 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={ `wc-block-product-gallery-large-image-next-previous-left--outside-image` }
>
<path
d="M17.7 0L21.5 3.16667L6.93334 19L21.5 34.8333L17.7 38L0.600002 19L17.7 0Z"
fill="black"
d="M9 1.28516L2 8.28516L9 15.2852"
stroke="black"
strokeWidth="1.5"
/>
</SVG>
);

98
plugins/woocommerce-blocks/assets/js/blocks/product-gallery/style.scss
View File

@ -11,6 +11,10 @@ $outside-image-offset: 30px;
$outside-image-max-width: calc(100% - (2 * $outside-image-offset));
$thumbnails-gap: 15px;
$default-number-of-thumbnails: 3;
$dialog-header-height: 29px;
$dialog-header-padding-top: calc(30px / 2);
$admin-bar-desktop-height: 32px;
$admin-bar-mobile-height: 46px;
// Product Gallery
#{$gallery} {
@ -26,14 +30,27 @@ $default-number-of-thumbnails: 3;
dialog {
position: fixed;
width: calc(100vw - 100px);
border: none;
border-radius: 10px;
height: 90vh;
top: 0;
margin-top: $gap-largest;
margin-bottom: $gap-largest;
z-index: 9999;
padding-top: 0;
height: 100vh;
.admin-bar & {
margin-top: $admin-bar-desktop-height;
height: calc(100vh - $admin-bar-desktop-height);
}
@media screen and (max-width: 782px) {
.admin-bar & {
margin-top: $admin-bar-mobile-height;
height: calc(100vh - $admin-bar-mobile-height);
}
}
.wc-block-product-gallery-dialog__header {
padding-top: $dialog-header-padding-top;
}
.wc-block-product-galler-dialog__header-right {
display: flex;
@ -47,6 +64,70 @@ $default-number-of-thumbnails: 3;
}
}
#{$large-image} {
height: calc(100vh - $dialog-header-height - $dialog-header-padding-top);
.admin-bar & {
height: calc(100vh - $admin-bar-desktop-height - $dialog-header-height - $dialog-header-padding-top);
}
@media screen and (max-width: 782px) {
.admin-bar & {
height: calc(100vh - $admin-bar-mobile-height - $dialog-header-height - $dialog-header-padding-top);
}
}
img {
object-fit: unset;
aspect-ratio: unset;
max-height: calc(100vh - (2 * $dialog-header-height) - $dialog-header-padding-top);
width: auto;
.admin-bar & {
max-height: calc(100vh - $admin-bar-desktop-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
}
@media screen and (max-width: 782px) {
.admin-bar & {
max-height: calc(100vh - $admin-bar-mobile-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
}
}
}
.wc-block-product-gallery-large-image__wrapper {
align-items: center;
aspect-ratio: unset;
}
.wc-block-product-gallery-large-image__container {
height: calc(100vh - (2 * $dialog-header-height) - $dialog-header-padding-top);
overflow: hidden;
.admin-bar & {
height: calc(100vh - $admin-bar-desktop-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
}
@media screen and (max-width: 782px) {
.admin-bar & {
height: calc(100vh - $admin-bar-mobile-height - (2 * $dialog-header-height) - $dialog-header-padding-top);
}
}
}
}
#{$next-previous} {
height: calc(100vh - $dialog-header-height - $dialog-header-padding-top);
.admin-bar & {
height: calc(100vh - $admin-bar-desktop-height - $dialog-header-height - $dialog-header-padding-top);
}
@media screen and (max-width: 782px) {
.admin-bar & {
height: calc(100vh - $admin-bar-mobile-height - $dialog-header-height - $dialog-header-padding-top);
}
}
}
}
}
@ -61,7 +142,8 @@ $default-number-of-thumbnails: 3;
// Restrict the width of the Large Image when the Next/Previous buttons are outside the image.
#{$gallery-next-previous-outside-image} & .wc-block-product-gallery-large-image__image-element {
overflow: hidden;
margin: 0 auto;
margin-right: auto;
margin-left: auto;
max-width: $outside-image-max-width;
}
@ -88,7 +170,8 @@ $default-number-of-thumbnails: 3;
#{$gallery-next-previous-inside-image} & .wc-block-product-gallery-large-image__image-element {
width: fit-content;
overflow: hidden;
margin: 0 auto;
margin-right: auto;
margin-left: auto;
}
@ -207,7 +290,6 @@ $default-number-of-thumbnails: 3;
flex-direction: row;
justify-content: space-between;
position: absolute;
height: 50px;
width: 100%;
&.wc-block-product-gallery-large-image-next-previous--inside-image {

3
plugins/woocommerce-blocks/changelog/42044-product-gallery-popup-simple Normal file
View File

@ -0,0 +1,3 @@
Significance: patch
Type: tweak
Comment: Product Gallery: Simplify the Product Gallery Pop-up.

3
plugins/woocommerce/changelog/42044-product-gallery-popup-simple Normal file
View File

@ -0,0 +1,3 @@
Significance: patch
Type: tweak
Comment: Product Gallery: Simplify the Product Gallery Pop-up.

6
plugins/woocommerce/src/Blocks/BlockTemplatesController.php
View File

@ -499,9 +499,11 @@ class BlockTemplatesController {
$templates = array();
foreach ( $template_files as $template_file ) {
if ( ! $this->package->is_experimental_build() && str_contains( $template_file, 'templates/parts/product-gallery.html' ) ) {
break;
// Skip the Product Gallery template part, as it is not supposed to be exposed at this point.
if ( str_contains( $template_file, 'templates/parts/product-gallery.html' ) ) {
continue;
}
// Skip the template if it's blockified, and we should only use classic ones.
if ( ! BlockTemplateUtils::should_use_blockified_product_grid_templates() && strpos( $template_file, 'blockified' ) !== false ) {
continue;

13
plugins/woocommerce/src/Blocks/BlockTypes/ProductGalleryLargeImageNextPrevious.php
View File

@ -191,8 +191,8 @@ class ProductGalleryLargeImageNextPrevious extends AbstractBlock {
* @return string The HTML for the button element.
*/
protected function get_outside_button( $button_type, $context ) {
$next_button_icon_path = 'M4.56666 0L0.766663 3.16667L15.3333 19L0.766663 34.8333L4.56666 38L21.6667 19L4.56666 0Z';
$previous_button_icon_path = 'M17.7 0L21.5 3.16667L6.93334 19L21.5 34.8333L17.7 38L0.600002 19L17.7 0Z';
$next_button_icon_path = 'M1 1.28516L8 8.28516L1 15.2852';
$previous_button_icon_path = 'M9 1.28516L2 8.28516L9 15.2852';
$icon_path = $previous_button_icon_path;
$button_side_class = 'left';
@ -204,15 +204,16 @@ class ProductGalleryLargeImageNextPrevious extends AbstractBlock {
return sprintf(
'<button class="wc-block-product-gallery-large-image-next-previous--button wc-block-product-gallery-large-image-next-previous-%1$s--%2$s">
<svg
width="22"
height="38"
viewBox="0 0 22 38"
width="10"
height="16"
viewBox="0 0 10 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="%3$s"
fill="black"
stroke="black"
stroke-width="1.5"
/>
</svg>
</button>',

22
plugins/woocommerce/templates/parts/product-gallery.html
View File

@ -1,29 +1,21 @@
<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group">
<!-- wp:post-title {"align":"full","__woocommerceNamespace":"woocommerce/product-collection/product-title"} /-->
<!-- wp:woocommerce/product-gallery {"mode":"full","pagerDisplayMode":"off"} -->
<div
class="wp-block-woocommerce-product-gallery wc-block-product-gallery wc-block-product-gallery--has-next-previous-buttons-inside-image">
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<!-- wp:woocommerce/product-gallery {"thumbnailsPosition":"off","pagerDisplayMode":"off","productGalleryClientId":"f043719f-dabd-4980-9f6b-91bca9ac7399","nextPreviousButtonsPosition":"outsideTheImage","mode":"full","align":"full"} -->
<div class="wp-block-woocommerce-product-gallery alignfull wc-block-product-gallery wc-block-product-gallery--has-next-previous-buttons-outside-image">
<!-- wp:group {"lock":{"move":true,"remove":true},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group">
<!-- wp:woocommerce/product-gallery-thumbnails {"lock":{"move":true,"remove":true}} /-->
<!-- wp:woocommerce/product-gallery-large-image {"lock":{"move":true,"remove":true}} -->
<div
class="wp-block-woocommerce-product-gallery-large-image wc-block-product-gallery-large-image__inner-blocks">
<!-- wp:woocommerce/product-sale-badge {"isDescendentOfSingleProductTemplate":true,"align":"right","style":{"spacing":{"margin":{"top":"4px","right":"4px","bottom":"4px","left":"4px"}}}} /-->
<!-- wp:woocommerce/product-gallery-large-image-next-previous {"layout":{"type":"flex","verticalAlignment":"bottom"}} -->
<!-- wp:woocommerce/product-gallery-large-image {"lock":{"move":false,"remove":false}} -->
<div class="wp-block-woocommerce-product-gallery-large-image wc-block-product-gallery-large-image__inner-blocks">
<!-- wp:woocommerce/product-gallery-large-image-next-previous {"layout":{"type":"flex","verticalAlignment":"center"}} -->
<div class="wp-block-woocommerce-product-gallery-large-image-next-previous"></div>
<!-- /wp:woocommerce/product-gallery-large-image-next-previous -->
</div>
<!-- /wp:woocommerce/product-gallery-large-image -->
</div>
<!-- /wp:group -->
<!-- wp:woocommerce/product-gallery-pager {"lock":{"move":true,"remove":true}} /-->
</div>
<!-- /wp:woocommerce/product-gallery -->
</div>
<!-- /wp:group -->