Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Editor: Bugfixes npm packages updates for 6.4 RC1. 

Updates for needed bugfixes in RC1:

* [https://github.com/WordPress/gutenberg/pull/55212 Image: Reimplement lightbox trigger as a minimal button in corner of image]

* [https://github.com/WordPress/gutenberg/pull/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: http://core.svn.wordpress.org/trunk@56472 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
hellofromTonya 2023-10-17 16:08:23 +00:00
parent c054eef096
commit e395ce0cf6
18 changed files with 186 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
wp-includes/blocks/image.php
View File

@ -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 );
@ -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 );

31
wp-includes/blocks/image/style-rtl.css
View File

@ -97,13 +97,25 @@
flex-direction:column;
position:relative;
}
.wp-lightbox-container button{
background:none;
border:none;
.wp-lightbox-container img{
cursor:zoom-in;
height:100%;
}
.wp-lightbox-container img:hover+button{
opacity:1;
}
.wp-lightbox-container button{
background:#000;
border:none;
border-radius:10%;
cursor:zoom-in;
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{
@ -111,8 +123,15 @@
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;
}

2
wp-includes/blocks/image/style-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

31
wp-includes/blocks/image/style.css
View File

@ -97,13 +97,25 @@
flex-direction:column;
position:relative;
}
.wp-lightbox-container button{
background:none;
border:none;
.wp-lightbox-container img{
cursor:zoom-in;
height:100%;
}
.wp-lightbox-container img:hover+button{
opacity:1;
}
.wp-lightbox-container button{
background:#000;
border:none;
border-radius:10%;
cursor:zoom-in;
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{
@ -111,8 +123,15 @@
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;
}

2
wp-includes/blocks/image/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/blocks/image/view.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => '3925a54ac2df8ffae562');
<?php return array('dependencies' => array(), 'version' => 'ddf37210a569166e2570');

93
wp-includes/blocks/image/view.js
View File

@ -94,8 +94,9 @@ function handleScroll(context) {
context.core.image.initialized = true;
context.core.image.lastFocusedElement = window.document.activeElement;
context.core.image.scrollDelta = 0;
context.core.image.pointerType = event.pointerType;
context.core.image.lightboxEnabled = true;
setStyles(context, event.target.previousElementSibling);
setStyles(context, context.core.image.imageRef);
context.core.image.scrollTopReset = window.pageYOffset || document.documentElement.scrollTop;
// In most cases, this value will be 0, but this is included
@ -116,7 +117,8 @@ function handleScroll(context) {
window.addEventListener('scroll', scrollCallback, false);
},
hideLightbox: async ({
context
context,
event
}) => {
context.core.image.hideAnimationEnabled = true;
if (context.core.image.lightboxEnabled) {
@ -130,9 +132,16 @@ function handleScroll(context) {
window.removeEventListener('scroll', scrollCallback);
}, 450);
context.core.image.lightboxEnabled = false;
context.core.image.lastFocusedElement.focus({
preventScroll: true
});
// We want to avoid drawing attention to the button
// after the lightbox closes for mouse and touch users.
// Note that the `event.pointerType` property returns
// as an empty string if a keyboard fired the event.
if (event.pointerType === '') {
context.core.image.lastFocusedElement.focus({
preventScroll: true
});
}
}
},
handleKeydown: ({
@ -159,8 +168,9 @@ function handleScroll(context) {
}
}
},
// This is fired just by lazily loaded
// images on the page, not all images.
handleLoad: ({
state,
context,
effects,
ref
@ -168,7 +178,6 @@ function handleScroll(context) {
context.core.image.imageLoaded = true;
context.core.image.imageCurrentSrc = ref.currentSrc;
effects.core.image.setButtonStyles({
state,
context,
ref
});
@ -236,10 +245,11 @@ function handleScroll(context) {
effects: {
core: {
image: {
setCurrentSrc: ({
initOriginImage: ({
context,
ref
}) => {
context.core.image.imageRef = ref;
if (ref.complete) {
context.core.image.imageLoaded = true;
context.core.image.imageCurrentSrc = ref.currentSrc;
@ -249,17 +259,22 @@ function handleScroll(context) {
context,
ref
}) => {
context.core.image.figureRef = ref.querySelector('figure');
context.core.image.imageRef = ref.querySelector('img');
if (context.core.image.lightboxEnabled) {
const focusableElements = ref.querySelectorAll(focusableSelectors);
context.core.image.firstFocusableElement = focusableElements[0];
context.core.image.lastFocusableElement = focusableElements[focusableElements.length - 1];
ref.querySelector('.close-button').focus();
// We want to avoid drawing unnecessary attention to the close
// button for mouse and touch users. Note that even if opening
// the lightbox via keyboard, the event fired is of type
// `pointerEvent`, so we need to rely on the `event.pointerType`
// property, which returns an empty string for keyboard events.
if (context.core.image.pointerType === '') {
ref.querySelector('.close-button').focus();
}
}
},
setButtonStyles: ({
state,
context,
ref
}) => {
@ -271,43 +286,51 @@ function handleScroll(context) {
} = ref;
// If the image isn't loaded yet, we can't
// calculate how big the button should be.
// calculate where the button should be.
if (naturalWidth === 0 || naturalHeight === 0) {
return;
}
const figure = ref.parentElement;
const figureWidth = ref.parentElement.clientWidth;
// Subscribe to the window dimensions so we can
// recalculate the styles if the window is resized.
if ((state.core.image.windowWidth || state.core.image.windowHeight) && context.core.image.scaleAttr === 'contain') {
// In the case of an image with object-fit: contain, the
// size of the img element can be larger than the image itself,
// so we need to calculate the size of the button to match.
// We need special handling for the height because
// a caption will cause the figure to be taller than
// the image, which means we need to account for that
// when calculating the placement of the button in the
// top right corner of the image.
let figureHeight = ref.parentElement.clientHeight;
const caption = figure.querySelector('figcaption');
if (caption) {
const captionComputedStyle = window.getComputedStyle(caption);
figureHeight = figureHeight - caption.offsetHeight - parseFloat(captionComputedStyle.marginTop) - parseFloat(captionComputedStyle.marginBottom);
}
const buttonOffsetTop = figureHeight - offsetHeight;
const buttonOffsetRight = figureWidth - offsetWidth;
// In the case of an image with object-fit: contain, the
// size of the <img> element can be larger than the image itself,
// so we need to calculate where to place the button.
if (context.core.image.scaleAttr === 'contain') {
// Natural ratio of the image.
const naturalRatio = naturalWidth / naturalHeight;
// Offset ratio of the image.
const offsetRatio = offsetWidth / offsetHeight;
if (naturalRatio > offsetRatio) {
if (naturalRatio >= offsetRatio) {
// If it reaches the width first, keep
// the width and recalculate the height.
context.core.image.imageButtonWidth = offsetWidth;
const buttonHeight = offsetWidth / naturalRatio;
context.core.image.imageButtonHeight = buttonHeight;
context.core.image.imageButtonTop = (offsetHeight - buttonHeight) / 2;
// the width and compute the height.
const referenceHeight = offsetWidth / naturalRatio;
context.core.image.imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 10;
context.core.image.imageButtonRight = buttonOffsetRight + 10;
} else {
// If it reaches the height first, keep
// the height and recalculate the width.
context.core.image.imageButtonHeight = offsetHeight;
const buttonWidth = offsetHeight * naturalRatio;
context.core.image.imageButtonWidth = buttonWidth;
context.core.image.imageButtonLeft = (offsetWidth - buttonWidth) / 2;
// the height and compute the width.
const referenceWidth = offsetHeight * naturalRatio;
context.core.image.imageButtonTop = buttonOffsetTop + 10;
context.core.image.imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 10;
}
} else {
// In all other cases, we can trust that the size of
// the image is the right size for the button as well.
context.core.image.imageButtonWidth = offsetWidth;
context.core.image.imageButtonHeight = offsetHeight;
context.core.image.imageButtonTop = buttonOffsetTop + 10;
context.core.image.imageButtonRight = buttonOffsetRight + 10;
}
},
setStylesOnResize: ({

2
wp-includes/blocks/image/view.min.asset.php
View File

@ -1 +1 @@
<?php return array('dependencies' => array(), 'version' => '658cda6fbef6b9d36ffd');
<?php return array('dependencies' => array(), 'version' => 'f889b00627bef81443e0');

2
wp-includes/blocks/image/view.min.js vendored
View File

File diff suppressed because one or more lines are too long

31
wp-includes/css/dist/block-library/style-rtl.css vendored
View File

@ -1174,13 +1174,25 @@ h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-t
flex-direction:column;
position:relative;
}
.wp-lightbox-container button{
background:none;
border:none;
.wp-lightbox-container img{
cursor:zoom-in;
height:100%;
}
.wp-lightbox-container img:hover+button{
opacity:1;
}
.wp-lightbox-container button{
background:#000;
border:none;
border-radius:10%;
cursor:zoom-in;
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{
@ -1188,8 +1200,15 @@ h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-t
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;
}

2
wp-includes/css/dist/block-library/style-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

31
wp-includes/css/dist/block-library/style.css vendored
View File

@ -1174,13 +1174,25 @@ h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-t
flex-direction:column;
position:relative;
}
.wp-lightbox-container button{
background:none;
border:none;
.wp-lightbox-container img{
cursor:zoom-in;
height:100%;
}
.wp-lightbox-container img:hover+button{
opacity:1;
}
.wp-lightbox-container button{
background:#000;
border:none;
border-radius:10%;
cursor:zoom-in;
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{
@ -1188,8 +1200,15 @@ h1.has-text-align-left[style*=writing-mode]:where([style*=vertical-lr]),h1.has-t
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;
}

2
wp-includes/css/dist/block-library/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/css/dist/edit-widgets/style-rtl.css vendored
View File

@ -1037,7 +1037,7 @@ body.js.appearance_page_gutenberg-widgets .media-frame select.attachment-filters
display:none;
}
.widgets-php .notice{
.js .widgets-php .notice{
display:none !important;
}

2
wp-includes/css/dist/edit-widgets/style-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/css/dist/edit-widgets/style.css vendored
View File

@ -1037,7 +1037,7 @@ body.js.appearance_page_gutenberg-widgets .media-frame select.attachment-filters
display:none;
}
.widgets-php .notice{
.js .widgets-php .notice{
display:none !important;
}

2
wp-includes/css/dist/edit-widgets/style.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '6.4-beta4-56960';
$wp_version = '6.4-beta4-56961';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.