Skip to content

Commit

Permalink
Editor: Bugfixes npm packages updates for 6.4 RC1.
Browse files Browse the repository at this point in the history
Updates for needed bugfixes in RC1:

* [WordPress/gutenberg#55212 Image: Reimplement lightbox trigger as a minimal button in corner of image]

* [WordPress/gutenberg#55403 [Edit Widgets] Only suppress admin notices when JS enabled.]

Follow-up to [56849], [56818], [56816].

Props artemiosans, jameskoster, SantosGuillamot, aristath, czapla, joen, afercia, richtabor, peterwilsoncc, andraganescu, hellofromTonya, siobhyb.
See #59411.
Built from https://develop.svn.wordpress.org/trunk@56961


git-svn-id: https://core.svn.wordpress.org/trunk@56472 1a063a9b-81f0-0310-95a4-ce76da25c4cd
  • Loading branch information
hellofromtonya committed Oct 17, 2023
1 parent 7993db0 commit 7db5271
Show file tree
Hide file tree
Showing 18 changed files with 178 additions and 69 deletions.
22 changes: 16 additions & 6 deletions wp-includes/blocks/image.php
Original file line number Diff line number Diff line change
Expand Up @@ -218,13 +218,17 @@ function block_core_image_render_lightbox( $block_content, $block ) {
)
);
$w->next_tag( 'img' );
$w->set_attribute( 'data-wp-init', 'effects.core.image.setCurrentSrc' );
$w->set_attribute( 'data-wp-init', 'effects.core.image.initOriginImage' );
$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
// We need to set an event callback on the `img` specifically
// because the `figure` element can also contain a caption, and
// we don't want to trigger the lightbox when the caption is clicked.
$w->set_attribute( 'data-wp-on--click', 'actions.core.image.showLightbox' );
$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
$body_content = $w->get_updated_html();

// Wrap the image in the body content with a button.
// Add a button alongside image in the body content.
$img = null;
preg_match( '/<img[^>]+>/', $body_content, $img );

Expand All @@ -235,11 +239,17 @@ function block_core_image_render_lightbox( $block_content, $block ) {
aria-haspopup="dialog"
aria-label="' . esc_attr( $aria_label ) . '"
data-wp-on--click="actions.core.image.showLightbox"
data-wp-style--width="context.core.image.imageButtonWidth"
data-wp-style--height="context.core.image.imageButtonHeight"
data-wp-style--left="context.core.image.imageButtonLeft"
data-wp-style--right="context.core.image.imageButtonRight"
data-wp-style--top="context.core.image.imageButtonTop"
></button>';
style="background: #000"
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M9 5H5V9" stroke="#FFFFFF" stroke-width="1.5"/>
<path d="M15 19L19 19L19 15" stroke="#FFFFFF" stroke-width="1.5"/>
<path d="M15 5H19V9" stroke="#FFFFFF" stroke-width="1.5"/>
<path d="M9 19L5 19L5 15" stroke="#FFFFFF" stroke-width="1.5"/>
</svg>
</button>';

$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );

Expand Down
27 changes: 23 additions & 4 deletions wp-includes/blocks/image/style-rtl.css
Original file line number Diff line number Diff line change
Expand Up @@ -97,22 +97,41 @@
flex-direction:column;
position:relative;
}
.wp-lightbox-container img{
cursor:zoom-in;
}
.wp-lightbox-container img:hover+button{
opacity:1;
}
.wp-lightbox-container button{
background:none;
background:#000;
border:none;
border-radius:10%;
cursor:zoom-in;
height:100%;
height:24px;
left:10px;
opacity:0;
padding:0;
position:absolute;
width:100%;
text-align:center;
top:10px;
width:24px;
z-index:100;
}
.wp-lightbox-container button:focus-visible{
outline:5px auto #212121;
outline:5px auto -webkit-focus-ring-color;
outline-offset:5px;
}
.wp-lightbox-container button:hover{
cursor:pointer;
opacity:1;
}
.wp-lightbox-container button:focus{
opacity:1;
}
.wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
background:none;
background:#000;
border:none;
}

Expand Down
2 changes: 1 addition & 1 deletion wp-includes/blocks/image/style-rtl.min.css

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

27 changes: 23 additions & 4 deletions wp-includes/blocks/image/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -97,22 +97,41 @@
flex-direction:column;
position:relative;
}
.wp-lightbox-container img{
cursor:zoom-in;
}
.wp-lightbox-container img:hover+button{
opacity:1;
}
.wp-lightbox-container button{
background:none;
background:#000;
border:none;
border-radius:10%;
cursor:zoom-in;
height:100%;
height:24px;
opacity:0;
padding:0;
position:absolute;
width:100%;
right:10px;
text-align:center;
top:10px;
width:24px;
z-index:100;
}
.wp-lightbox-container button:focus-visible{
outline:5px auto #212121;
outline:5px auto -webkit-focus-ring-color;
outline-offset:5px;
}
.wp-lightbox-container button:hover{
cursor:pointer;
opacity:1;
}
.wp-lightbox-container button:focus{
opacity:1;
}
.wp-lightbox-container button:focus,.wp-lightbox-container button:hover,.wp-lightbox-container button:not(:hover):not(:active):not(.has-background){
background:none;
background:#000;
border:none;
}

Expand Down
Loading

0 comments on commit 7db5271

Please sign in to comment.