first commit
This commit is contained in:
Roman Pyrih
156
wp-includes/blocks/image/block.json
Normal file
156
wp-includes/blocks/image/block.json
Normal file
@@ -0,0 +1,156 @@
|
||||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 3,
|
||||
"name": "core/image",
|
||||
"title": "Image",
|
||||
"category": "media",
|
||||
"usesContext": [
|
||||
"allowResize",
|
||||
"imageCrop",
|
||||
"fixedHeight",
|
||||
"navigationButtonType",
|
||||
"postId",
|
||||
"postType",
|
||||
"queryId",
|
||||
"galleryId"
|
||||
],
|
||||
"description": "Insert an image to make a visual statement.",
|
||||
"keywords": [ "img", "photo", "picture" ],
|
||||
"textdomain": "default",
|
||||
"attributes": {
|
||||
"blob": {
|
||||
"type": "string",
|
||||
"role": "local"
|
||||
},
|
||||
"url": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "img",
|
||||
"attribute": "src",
|
||||
"role": "content"
|
||||
},
|
||||
"alt": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "img",
|
||||
"attribute": "alt",
|
||||
"default": "",
|
||||
"role": "content"
|
||||
},
|
||||
"caption": {
|
||||
"type": "rich-text",
|
||||
"source": "rich-text",
|
||||
"selector": "figcaption",
|
||||
"role": "content"
|
||||
},
|
||||
"lightbox": {
|
||||
"type": "object",
|
||||
"enabled": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "img",
|
||||
"attribute": "title",
|
||||
"role": "content"
|
||||
},
|
||||
"href": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure > a",
|
||||
"attribute": "href",
|
||||
"role": "content"
|
||||
},
|
||||
"rel": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure > a",
|
||||
"attribute": "rel"
|
||||
},
|
||||
"linkClass": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure > a",
|
||||
"attribute": "class"
|
||||
},
|
||||
"id": {
|
||||
"type": "number",
|
||||
"role": "content"
|
||||
},
|
||||
"width": {
|
||||
"type": "string"
|
||||
},
|
||||
"height": {
|
||||
"type": "string"
|
||||
},
|
||||
"aspectRatio": {
|
||||
"type": "string"
|
||||
},
|
||||
"scale": {
|
||||
"type": "string"
|
||||
},
|
||||
"focalPoint": {
|
||||
"type": "object"
|
||||
},
|
||||
"sizeSlug": {
|
||||
"type": "string"
|
||||
},
|
||||
"linkDestination": {
|
||||
"type": "string"
|
||||
},
|
||||
"linkTarget": {
|
||||
"type": "string",
|
||||
"source": "attribute",
|
||||
"selector": "figure > a",
|
||||
"attribute": "target"
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
"interactivity": true,
|
||||
"align": [ "left", "center", "right", "wide", "full" ],
|
||||
"anchor": true,
|
||||
"color": {
|
||||
"text": false,
|
||||
"background": false
|
||||
},
|
||||
"filter": {
|
||||
"duotone": true
|
||||
},
|
||||
"spacing": {
|
||||
"margin": true
|
||||
},
|
||||
"__experimentalBorder": {
|
||||
"color": true,
|
||||
"radius": true,
|
||||
"width": true,
|
||||
"__experimentalSkipSerialization": true,
|
||||
"__experimentalDefaultControls": {
|
||||
"color": true,
|
||||
"radius": true,
|
||||
"width": true
|
||||
}
|
||||
},
|
||||
"shadow": {
|
||||
"__experimentalSkipSerialization": true
|
||||
}
|
||||
},
|
||||
"selectors": {
|
||||
"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
|
||||
"shadow": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
|
||||
"filter": {
|
||||
"duotone": ".wp-block-image img, .wp-block-image .components-placeholder"
|
||||
}
|
||||
},
|
||||
"styles": [
|
||||
{
|
||||
"name": "default",
|
||||
"label": "Default",
|
||||
"isDefault": true
|
||||
},
|
||||
{ "name": "rounded", "label": "Rounded" }
|
||||
],
|
||||
"editorStyle": "wp-block-image-editor",
|
||||
"style": "wp-block-image"
|
||||
}
|
||||
216
wp-includes/blocks/image/editor-rtl.css
Normal file
216
wp-includes/blocks/image/editor-rtl.css
Normal file
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* Colors
|
||||
*/
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* SCSS Variables.
|
||||
*
|
||||
* Please use variables from this sheet to ensure consistency across the UI.
|
||||
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
|
||||
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
|
||||
*/
|
||||
/**
|
||||
* Fonts & basic variables.
|
||||
*/
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* Grid System.
|
||||
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
|
||||
*/
|
||||
/**
|
||||
* Radius scale.
|
||||
*/
|
||||
/**
|
||||
* Elevation scale.
|
||||
*/
|
||||
/**
|
||||
* Dimensions.
|
||||
*/
|
||||
/**
|
||||
* Mobile specific styles
|
||||
*/
|
||||
/**
|
||||
* Editor styles.
|
||||
*/
|
||||
/**
|
||||
* Block & Editor UI.
|
||||
*/
|
||||
/**
|
||||
* Block paddings.
|
||||
*/
|
||||
/**
|
||||
* React Native specific.
|
||||
* These variables do not appear to be used anywhere else.
|
||||
*/
|
||||
/**
|
||||
* Breakpoints & Media Queries
|
||||
*/
|
||||
/**
|
||||
* Converts a hex value into the rgb equivalent.
|
||||
*
|
||||
* @param {string} hex - the hexadecimal value to convert
|
||||
* @return {string} comma separated rgb values
|
||||
*/
|
||||
/**
|
||||
* Long content fade mixin
|
||||
*
|
||||
* Creates a fading overlay to signify that the content is longer
|
||||
* than the space allows.
|
||||
*/
|
||||
/**
|
||||
* Breakpoint mixins
|
||||
*/
|
||||
/**
|
||||
* Focus styles.
|
||||
*/
|
||||
/**
|
||||
* Applies editor left position to the selector passed as argument
|
||||
*/
|
||||
/**
|
||||
* Styles that are reused verbatim in a few places
|
||||
*/
|
||||
/**
|
||||
* Allows users to opt-out of animations via OS-level preferences.
|
||||
*/
|
||||
/**
|
||||
* Reset default styles for JavaScript UI based pages.
|
||||
* This is a WP-admin agnostic reset
|
||||
*/
|
||||
/**
|
||||
* Reset the WP Admin page styles for Gutenberg-like pages.
|
||||
*/
|
||||
/**
|
||||
* Creates a checkerboard pattern background to indicate transparency.
|
||||
* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
|
||||
*/
|
||||
.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
figure.wp-block-image:not(.wp-block) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-block-image {
|
||||
position: relative;
|
||||
}
|
||||
.wp-block-image .is-applying img, .wp-block-image.is-transient img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.wp-block-image figcaption img {
|
||||
display: inline;
|
||||
}
|
||||
.wp-block-image .components-spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
transform: translate(50%, -50%);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-block-image__placeholder {
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.wp-block-image__placeholder.has-illustration::before {
|
||||
background: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.wp-block-image__placeholder .components-placeholder__illustration {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
margin: -1px 0;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
|
||||
margin: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-align=wide] > .wp-block-image img,
|
||||
[data-align=full] > .wp-block-image img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block[data-align=left] > .wp-block-image,
|
||||
.wp-block[data-align=center] > .wp-block-image,
|
||||
.wp-block[data-align=right] > .wp-block-image {
|
||||
display: table;
|
||||
}
|
||||
.wp-block[data-align=left] > .wp-block-image > figcaption,
|
||||
.wp-block[data-align=center] > .wp-block-image > figcaption,
|
||||
.wp-block[data-align=right] > .wp-block-image > figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
.wp-block[data-align=left] > .wp-block-image {
|
||||
margin-left: 1em;
|
||||
margin-right: 0;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.wp-block[data-align=right] > .wp-block-image {
|
||||
margin-right: 1em;
|
||||
margin-left: 0;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.wp-block[data-align=center] > .wp-block-image {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wp-block[data-align]:has(> .wp-block-image) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-block-image__crop-area {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wp-block-image__crop-area .reactEasyCrop_Container {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wp-block-image__crop-icon {
|
||||
padding: 0 8px;
|
||||
min-width: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.wp-block-image__crop-icon svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.wp-block-image__zoom .components-popover__content {
|
||||
min-width: 260px;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.wp-block-image__toolbar_content_textarea__container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.wp-block-image__toolbar_content_textarea {
|
||||
width: 250px;
|
||||
}
|
||||
1
wp-includes/blocks/image/editor-rtl.min.css
vendored
Normal file
1
wp-includes/blocks/image/editor-rtl.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small{min-height:60px}figure.wp-block-image:not(.wp-block){margin:0}.wp-block-image{position:relative}.wp-block-image .is-applying img,.wp-block-image.is-transient img{opacity:.3}.wp-block-image figcaption img{display:inline}.wp-block-image .components-spinner{margin:0;position:absolute;right:50%;top:50%;transform:translate(50%,-50%)}.wp-block-image__placeholder{aspect-ratio:4/3}.wp-block-image__placeholder.has-illustration:before{background:#fff;opacity:.8}.wp-block-image__placeholder .components-placeholder__illustration{opacity:.1}.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{left:0;margin:-1px 0;position:absolute;right:0}@media (min-width:600px){.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{margin:-1px}}[data-align=full]>.wp-block-image img,[data-align=wide]>.wp-block-image img{height:auto;width:100%}.wp-block[data-align=center]>.wp-block-image,.wp-block[data-align=left]>.wp-block-image,.wp-block[data-align=right]>.wp-block-image{display:table}.wp-block[data-align=center]>.wp-block-image>figcaption,.wp-block[data-align=left]>.wp-block-image>figcaption,.wp-block[data-align=right]>.wp-block-image>figcaption{caption-side:bottom;display:table-caption}.wp-block[data-align=left]>.wp-block-image{margin:.5em 0 .5em 1em}.wp-block[data-align=right]>.wp-block-image{margin:.5em 1em .5em 0}.wp-block[data-align=center]>.wp-block-image{margin-left:auto;margin-right:auto;text-align:center}.wp-block[data-align]:has(>.wp-block-image){position:relative}.wp-block-image__crop-area{max-width:100%;overflow:hidden;position:relative;width:100%}.wp-block-image__crop-area .reactEasyCrop_Container{pointer-events:auto}.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{border:none;border-radius:0}.wp-block-image__crop-icon{align-items:center;display:flex;justify-content:center;min-width:48px;padding:0 8px}.wp-block-image__crop-icon svg{fill:currentColor}.wp-block-image__zoom .components-popover__content{min-width:260px;overflow:visible!important}.wp-block-image__toolbar_content_textarea__container{padding:8px}.wp-block-image__toolbar_content_textarea{width:250px}
|
||||
216
wp-includes/blocks/image/editor.css
Normal file
216
wp-includes/blocks/image/editor.css
Normal file
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* Colors
|
||||
*/
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* SCSS Variables.
|
||||
*
|
||||
* Please use variables from this sheet to ensure consistency across the UI.
|
||||
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
|
||||
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
|
||||
*/
|
||||
/**
|
||||
* Fonts & basic variables.
|
||||
*/
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* Grid System.
|
||||
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
|
||||
*/
|
||||
/**
|
||||
* Radius scale.
|
||||
*/
|
||||
/**
|
||||
* Elevation scale.
|
||||
*/
|
||||
/**
|
||||
* Dimensions.
|
||||
*/
|
||||
/**
|
||||
* Mobile specific styles
|
||||
*/
|
||||
/**
|
||||
* Editor styles.
|
||||
*/
|
||||
/**
|
||||
* Block & Editor UI.
|
||||
*/
|
||||
/**
|
||||
* Block paddings.
|
||||
*/
|
||||
/**
|
||||
* React Native specific.
|
||||
* These variables do not appear to be used anywhere else.
|
||||
*/
|
||||
/**
|
||||
* Breakpoints & Media Queries
|
||||
*/
|
||||
/**
|
||||
* Converts a hex value into the rgb equivalent.
|
||||
*
|
||||
* @param {string} hex - the hexadecimal value to convert
|
||||
* @return {string} comma separated rgb values
|
||||
*/
|
||||
/**
|
||||
* Long content fade mixin
|
||||
*
|
||||
* Creates a fading overlay to signify that the content is longer
|
||||
* than the space allows.
|
||||
*/
|
||||
/**
|
||||
* Breakpoint mixins
|
||||
*/
|
||||
/**
|
||||
* Focus styles.
|
||||
*/
|
||||
/**
|
||||
* Applies editor left position to the selector passed as argument
|
||||
*/
|
||||
/**
|
||||
* Styles that are reused verbatim in a few places
|
||||
*/
|
||||
/**
|
||||
* Allows users to opt-out of animations via OS-level preferences.
|
||||
*/
|
||||
/**
|
||||
* Reset default styles for JavaScript UI based pages.
|
||||
* This is a WP-admin agnostic reset
|
||||
*/
|
||||
/**
|
||||
* Reset the WP Admin page styles for Gutenberg-like pages.
|
||||
*/
|
||||
/**
|
||||
* Creates a checkerboard pattern background to indicate transparency.
|
||||
* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
|
||||
*/
|
||||
.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
figure.wp-block-image:not(.wp-block) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-block-image {
|
||||
position: relative;
|
||||
}
|
||||
.wp-block-image .is-applying img, .wp-block-image.is-transient img {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.wp-block-image figcaption img {
|
||||
display: inline;
|
||||
}
|
||||
.wp-block-image .components-spinner {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-block-image__placeholder {
|
||||
aspect-ratio: 4/3;
|
||||
}
|
||||
.wp-block-image__placeholder.has-illustration::before {
|
||||
background: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.wp-block-image__placeholder .components-placeholder__illustration {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: -1px 0;
|
||||
}
|
||||
@media (min-width: 600px) {
|
||||
.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal {
|
||||
margin: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-align=wide] > .wp-block-image img,
|
||||
[data-align=full] > .wp-block-image img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-block[data-align=left] > .wp-block-image,
|
||||
.wp-block[data-align=center] > .wp-block-image,
|
||||
.wp-block[data-align=right] > .wp-block-image {
|
||||
display: table;
|
||||
}
|
||||
.wp-block[data-align=left] > .wp-block-image > figcaption,
|
||||
.wp-block[data-align=center] > .wp-block-image > figcaption,
|
||||
.wp-block[data-align=right] > .wp-block-image > figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
.wp-block[data-align=left] > .wp-block-image {
|
||||
margin-right: 1em;
|
||||
margin-left: 0;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.wp-block[data-align=right] > .wp-block-image {
|
||||
margin-left: 1em;
|
||||
margin-right: 0;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.wp-block[data-align=center] > .wp-block-image {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wp-block[data-align]:has(> .wp-block-image) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-block-image__crop-area {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wp-block-image__crop-area .reactEasyCrop_Container {
|
||||
pointer-events: auto;
|
||||
}
|
||||
.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.wp-block-image__crop-icon {
|
||||
padding: 0 8px;
|
||||
min-width: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.wp-block-image__crop-icon svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.wp-block-image__zoom .components-popover__content {
|
||||
min-width: 260px;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
.wp-block-image__toolbar_content_textarea__container {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.wp-block-image__toolbar_content_textarea {
|
||||
width: 250px;
|
||||
}
|
||||
1
wp-includes/blocks/image/editor.min.css
vendored
Normal file
1
wp-includes/blocks/image/editor.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.wp-block-image.wp-block-image .block-editor-media-placeholder.is-small{min-height:60px}figure.wp-block-image:not(.wp-block){margin:0}.wp-block-image{position:relative}.wp-block-image .is-applying img,.wp-block-image.is-transient img{opacity:.3}.wp-block-image figcaption img{display:inline}.wp-block-image .components-spinner{left:50%;margin:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.wp-block-image__placeholder{aspect-ratio:4/3}.wp-block-image__placeholder.has-illustration:before{background:#fff;opacity:.8}.wp-block-image__placeholder .components-placeholder__illustration{opacity:.1}.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{left:0;margin:-1px 0;position:absolute;right:0}@media (min-width:600px){.block-editor-block-list__block[data-type="core/image"] .block-editor-block-toolbar .block-editor-url-input__button-modal{margin:-1px}}[data-align=full]>.wp-block-image img,[data-align=wide]>.wp-block-image img{height:auto;width:100%}.wp-block[data-align=center]>.wp-block-image,.wp-block[data-align=left]>.wp-block-image,.wp-block[data-align=right]>.wp-block-image{display:table}.wp-block[data-align=center]>.wp-block-image>figcaption,.wp-block[data-align=left]>.wp-block-image>figcaption,.wp-block[data-align=right]>.wp-block-image>figcaption{caption-side:bottom;display:table-caption}.wp-block[data-align=left]>.wp-block-image{margin:.5em 1em .5em 0}.wp-block[data-align=right]>.wp-block-image{margin:.5em 0 .5em 1em}.wp-block[data-align=center]>.wp-block-image{margin-left:auto;margin-right:auto;text-align:center}.wp-block[data-align]:has(>.wp-block-image){position:relative}.wp-block-image__crop-area{max-width:100%;overflow:hidden;position:relative;width:100%}.wp-block-image__crop-area .reactEasyCrop_Container{pointer-events:auto}.wp-block-image__crop-area .reactEasyCrop_Container .reactEasyCrop_Image{border:none;border-radius:0}.wp-block-image__crop-icon{align-items:center;display:flex;justify-content:center;min-width:48px;padding:0 8px}.wp-block-image__crop-icon svg{fill:currentColor}.wp-block-image__zoom .components-popover__content{min-width:260px;overflow:visible!important}.wp-block-image__toolbar_content_textarea__container{padding:8px}.wp-block-image__toolbar_content_textarea{width:250px}
|
||||
477
wp-includes/blocks/image/style-rtl.css
Normal file
477
wp-includes/blocks/image/style-rtl.css
Normal file
@@ -0,0 +1,477 @@
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* SCSS Variables.
|
||||
*
|
||||
* Please use variables from this sheet to ensure consistency across the UI.
|
||||
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
|
||||
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
|
||||
*/
|
||||
/**
|
||||
* Colors
|
||||
*/
|
||||
/**
|
||||
* Fonts & basic variables.
|
||||
*/
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* Grid System.
|
||||
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
|
||||
*/
|
||||
/**
|
||||
* Radius scale.
|
||||
*/
|
||||
/**
|
||||
* Elevation scale.
|
||||
*/
|
||||
/**
|
||||
* Dimensions.
|
||||
*/
|
||||
/**
|
||||
* Mobile specific styles
|
||||
*/
|
||||
/**
|
||||
* Editor styles.
|
||||
*/
|
||||
/**
|
||||
* Block & Editor UI.
|
||||
*/
|
||||
/**
|
||||
* Block paddings.
|
||||
*/
|
||||
/**
|
||||
* React Native specific.
|
||||
* These variables do not appear to be used anywhere else.
|
||||
*/
|
||||
/**
|
||||
* Breakpoints & Media Queries
|
||||
*/
|
||||
/**
|
||||
* Converts a hex value into the rgb equivalent.
|
||||
*
|
||||
* @param {string} hex - the hexadecimal value to convert
|
||||
* @return {string} comma separated rgb values
|
||||
*/
|
||||
/**
|
||||
* Long content fade mixin
|
||||
*
|
||||
* Creates a fading overlay to signify that the content is longer
|
||||
* than the space allows.
|
||||
*/
|
||||
/**
|
||||
* Breakpoint mixins
|
||||
*/
|
||||
/**
|
||||
* Focus styles.
|
||||
*/
|
||||
/**
|
||||
* Applies editor left position to the selector passed as argument
|
||||
*/
|
||||
/**
|
||||
* Styles that are reused verbatim in a few places
|
||||
*/
|
||||
/**
|
||||
* Allows users to opt-out of animations via OS-level preferences.
|
||||
*/
|
||||
/**
|
||||
* Reset default styles for JavaScript UI based pages.
|
||||
* This is a WP-admin agnostic reset
|
||||
*/
|
||||
/**
|
||||
* Reset the WP Admin page styles for Gutenberg-like pages.
|
||||
*/
|
||||
/**
|
||||
* Creates a checkerboard pattern background to indicate transparency.
|
||||
* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
|
||||
*/
|
||||
.wp-block-image > a,
|
||||
.wp-block-image > figure > a {
|
||||
display: inline-block;
|
||||
}
|
||||
.wp-block-image img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
vertical-align: bottom;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-block-image img.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
.wp-block-image img.show {
|
||||
animation: show-content-image 0.4s;
|
||||
}
|
||||
}
|
||||
.wp-block-image[style*=border-radius] > a,
|
||||
.wp-block-image[style*=border-radius] img {
|
||||
border-radius: inherit;
|
||||
}
|
||||
.wp-block-image.has-custom-border img {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wp-block-image.aligncenter {
|
||||
text-align: center;
|
||||
}
|
||||
.wp-block-image.alignfull > a, .wp-block-image.alignwide > a {
|
||||
width: 100%;
|
||||
}
|
||||
.wp-block-image.alignfull img, .wp-block-image.alignwide img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.wp-block-image.alignleft, .wp-block-image.alignright, .wp-block-image.aligncenter,
|
||||
.wp-block-image .alignleft,
|
||||
.wp-block-image .alignright,
|
||||
.wp-block-image .aligncenter {
|
||||
display: table;
|
||||
}
|
||||
.wp-block-image.alignleft > figcaption, .wp-block-image.alignright > figcaption, .wp-block-image.aligncenter > figcaption,
|
||||
.wp-block-image .alignleft > figcaption,
|
||||
.wp-block-image .alignright > figcaption,
|
||||
.wp-block-image .aligncenter > figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
}
|
||||
.wp-block-image .alignleft {
|
||||
float: left;
|
||||
margin-left: 0;
|
||||
margin-right: 1em;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.wp-block-image .alignright {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 1em;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.wp-block-image .aligncenter {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
.wp-block-image :where(figcaption) {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.wp-block-image.is-style-circle-mask img {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
@supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
|
||||
.wp-block-image.is-style-circle-mask img {
|
||||
/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
|
||||
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
|
||||
mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
|
||||
mask-mode: alpha;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.wp-block-image figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-lightbox-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wp-lightbox-container img {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.wp-lightbox-container img:hover + button {
|
||||
opacity: 1;
|
||||
}
|
||||
.wp-lightbox-container button {
|
||||
opacity: 0;
|
||||
border: none;
|
||||
background-color: rgba(90, 90, 90, 0.25);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
cursor: zoom-in;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-container button {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
.wp-lightbox-container button:focus-visible {
|
||||
outline: 3px auto rgba(90, 90, 90, 0.25);
|
||||
outline: 3px auto -webkit-focus-ring-color;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.wp-lightbox-container button:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
.wp-lightbox-container button:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
|
||||
background-color: rgba(90, 90, 90, 0.25);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.wp-lightbox-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 100000;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
visibility: hidden;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-close-button {
|
||||
font-family: inherit;
|
||||
position: absolute;
|
||||
top: calc(env(safe-area-inset-top) + 16px);
|
||||
left: calc(env(safe-area-inset-left) + 16px);
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
z-index: 5000000;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-close-button:hover, .wp-lightbox-overlay .wp-lightbox-close-button:focus, .wp-lightbox-overlay .wp-lightbox-close-button:not(:hover):not(:active):not(.has-background) {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-close-button:has(.wp-lightbox-close-text:not([hidden])) .wp-lightbox-close-icon svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-close-icon svg {
|
||||
display: block;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
|
||||
position: absolute;
|
||||
padding: 0 8px;
|
||||
z-index: 2000002;
|
||||
font-family: inherit;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
gap: 4px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
bottom: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev[hidden],
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 960px) {
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
|
||||
bottom: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:hover, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:focus, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:not(:hover):not(:active):not(.has-background),
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:hover,
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:focus,
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:not(:hover):not(:active):not(.has-background) {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:has(.wp-lightbox-navigation-text:not([hidden])) .wp-lightbox-navigation-icon svg,
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:has(.wp-lightbox-navigation-text:not([hidden])) .wp-lightbox-navigation-icon svg {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: block;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
|
||||
right: calc(env(safe-area-inset-right) + 16px);
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
|
||||
left: calc(env(safe-area-inset-left) + 16px);
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-icon svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.wp-lightbox-overlay .lightbox-image-container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
transform-origin: top right;
|
||||
transform: translate(50%, -50%);
|
||||
width: var(--wp--lightbox-container-width);
|
||||
height: var(--wp--lightbox-container-height);
|
||||
z-index: 2000001;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image {
|
||||
position: relative;
|
||||
transform-origin: 100% 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
z-index: 3000000;
|
||||
margin: 0;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image img {
|
||||
min-width: var(--wp--lightbox-image-width);
|
||||
min-height: var(--wp--lightbox-image-height);
|
||||
width: var(--wp--lightbox-image-width);
|
||||
height: var(--wp--lightbox-image-height);
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image figcaption {
|
||||
display: none;
|
||||
}
|
||||
.wp-lightbox-overlay button {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.wp-lightbox-overlay .scrim {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2000000;
|
||||
background-color: rgb(255, 255, 255);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.wp-lightbox-overlay.active {
|
||||
visibility: visible;
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-overlay.active {
|
||||
animation: both turn-on-visibility 0.25s;
|
||||
}
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-overlay.active img {
|
||||
animation: both turn-on-visibility 0.35s;
|
||||
}
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-overlay.show-closing-animation:not(.active) {
|
||||
animation: both turn-off-visibility 0.35s;
|
||||
}
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-overlay.show-closing-animation:not(.active) img {
|
||||
animation: both turn-off-visibility 0.25s;
|
||||
}
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-overlay.zoom.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
animation: none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .lightbox-image-container {
|
||||
animation: lightbox-zoom-in 0.4s;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .lightbox-image-container img {
|
||||
animation: none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .scrim {
|
||||
animation: turn-on-visibility 0.4s forwards;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) {
|
||||
animation: none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container {
|
||||
animation: lightbox-zoom-out 0.4s;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img {
|
||||
animation: none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim {
|
||||
animation: turn-off-visibility 0.4s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-content-image {
|
||||
0% {
|
||||
visibility: hidden;
|
||||
}
|
||||
99% {
|
||||
visibility: hidden;
|
||||
}
|
||||
100% {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@keyframes turn-on-visibility {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes turn-off-visibility {
|
||||
0% {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
99% {
|
||||
opacity: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@keyframes lightbox-zoom-in {
|
||||
0% {
|
||||
transform: translate(calc(-1*((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
|
||||
}
|
||||
100% {
|
||||
transform: translate(50%, -50%) scale(1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes lightbox-zoom-out {
|
||||
0% {
|
||||
visibility: visible;
|
||||
transform: translate(50%, -50%) scale(1, 1);
|
||||
}
|
||||
99% {
|
||||
visibility: visible;
|
||||
}
|
||||
100% {
|
||||
visibility: hidden;
|
||||
transform: translate(calc(-1*((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position))), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
|
||||
}
|
||||
}
|
||||
1
wp-includes/blocks/image/style-rtl.min.css
vendored
Normal file
1
wp-includes/blocks/image/style-rtl.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
483
wp-includes/blocks/image/style.css
Normal file
483
wp-includes/blocks/image/style.css
Normal file
@@ -0,0 +1,483 @@
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* SCSS Variables.
|
||||
*
|
||||
* Please use variables from this sheet to ensure consistency across the UI.
|
||||
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
|
||||
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
|
||||
*/
|
||||
/**
|
||||
* Colors
|
||||
*/
|
||||
/**
|
||||
* Fonts & basic variables.
|
||||
*/
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* Grid System.
|
||||
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
|
||||
*/
|
||||
/**
|
||||
* Radius scale.
|
||||
*/
|
||||
/**
|
||||
* Elevation scale.
|
||||
*/
|
||||
/**
|
||||
* Dimensions.
|
||||
*/
|
||||
/**
|
||||
* Mobile specific styles
|
||||
*/
|
||||
/**
|
||||
* Editor styles.
|
||||
*/
|
||||
/**
|
||||
* Block & Editor UI.
|
||||
*/
|
||||
/**
|
||||
* Block paddings.
|
||||
*/
|
||||
/**
|
||||
* React Native specific.
|
||||
* These variables do not appear to be used anywhere else.
|
||||
*/
|
||||
/**
|
||||
* Breakpoints & Media Queries
|
||||
*/
|
||||
/**
|
||||
* Converts a hex value into the rgb equivalent.
|
||||
*
|
||||
* @param {string} hex - the hexadecimal value to convert
|
||||
* @return {string} comma separated rgb values
|
||||
*/
|
||||
/**
|
||||
* Long content fade mixin
|
||||
*
|
||||
* Creates a fading overlay to signify that the content is longer
|
||||
* than the space allows.
|
||||
*/
|
||||
/**
|
||||
* Breakpoint mixins
|
||||
*/
|
||||
/**
|
||||
* Focus styles.
|
||||
*/
|
||||
/**
|
||||
* Applies editor left position to the selector passed as argument
|
||||
*/
|
||||
/**
|
||||
* Styles that are reused verbatim in a few places
|
||||
*/
|
||||
/**
|
||||
* Allows users to opt-out of animations via OS-level preferences.
|
||||
*/
|
||||
/**
|
||||
* Reset default styles for JavaScript UI based pages.
|
||||
* This is a WP-admin agnostic reset
|
||||
*/
|
||||
/**
|
||||
* Reset the WP Admin page styles for Gutenberg-like pages.
|
||||
*/
|
||||
/**
|
||||
* Creates a checkerboard pattern background to indicate transparency.
|
||||
* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
|
||||
*/
|
||||
.wp-block-image > a,
|
||||
.wp-block-image > figure > a {
|
||||
display: inline-block;
|
||||
}
|
||||
.wp-block-image img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
vertical-align: bottom;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-block-image img.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
.wp-block-image img.show {
|
||||
animation: show-content-image 0.4s;
|
||||
}
|
||||
}
|
||||
.wp-block-image[style*=border-radius] > a,
|
||||
.wp-block-image[style*=border-radius] img {
|
||||
border-radius: inherit;
|
||||
}
|
||||
.wp-block-image.has-custom-border img {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.wp-block-image.aligncenter {
|
||||
text-align: center;
|
||||
}
|
||||
.wp-block-image.alignfull > a, .wp-block-image.alignwide > a {
|
||||
width: 100%;
|
||||
}
|
||||
.wp-block-image.alignfull img, .wp-block-image.alignwide img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.wp-block-image.alignleft, .wp-block-image.alignright, .wp-block-image.aligncenter,
|
||||
.wp-block-image .alignleft,
|
||||
.wp-block-image .alignright,
|
||||
.wp-block-image .aligncenter {
|
||||
display: table;
|
||||
}
|
||||
.wp-block-image.alignleft > figcaption, .wp-block-image.alignright > figcaption, .wp-block-image.aligncenter > figcaption,
|
||||
.wp-block-image .alignleft > figcaption,
|
||||
.wp-block-image .alignright > figcaption,
|
||||
.wp-block-image .aligncenter > figcaption {
|
||||
display: table-caption;
|
||||
caption-side: bottom;
|
||||
}
|
||||
.wp-block-image .alignleft {
|
||||
/*rtl:ignore*/
|
||||
float: left;
|
||||
/*rtl:ignore*/
|
||||
margin-left: 0;
|
||||
/*rtl:ignore*/
|
||||
margin-right: 1em;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.wp-block-image .alignright {
|
||||
/*rtl:ignore*/
|
||||
float: right;
|
||||
/*rtl:ignore*/
|
||||
margin-right: 0;
|
||||
/*rtl:ignore*/
|
||||
margin-left: 1em;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.wp-block-image .aligncenter {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.wp-block-image :where(figcaption) {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.wp-block-image.is-style-circle-mask img {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
@supports ((-webkit-mask-image: none) or (mask-image: none)) or (-webkit-mask-image: none) {
|
||||
.wp-block-image.is-style-circle-mask img {
|
||||
/* stylelint-disable-next-line function-url-quotes -- We need quotes for the data URL to use the SVG inline. */
|
||||
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
|
||||
mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
|
||||
mask-mode: alpha;
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
mask-repeat: no-repeat;
|
||||
-webkit-mask-size: contain;
|
||||
mask-size: contain;
|
||||
-webkit-mask-position: center;
|
||||
mask-position: center;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:root :where(.wp-block-image.is-style-rounded img, .wp-block-image .is-style-rounded img) {
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.wp-block-image figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wp-lightbox-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wp-lightbox-container img {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.wp-lightbox-container img:hover + button {
|
||||
opacity: 1;
|
||||
}
|
||||
.wp-lightbox-container button {
|
||||
opacity: 0;
|
||||
border: none;
|
||||
background-color: rgba(90, 90, 90, 0.25);
|
||||
backdrop-filter: blur(16px) saturate(180%);
|
||||
cursor: zoom-in;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-container button {
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
}
|
||||
.wp-lightbox-container button:focus-visible {
|
||||
outline: 3px auto rgba(90, 90, 90, 0.25);
|
||||
outline: 3px auto -webkit-focus-ring-color;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.wp-lightbox-container button:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
.wp-lightbox-container button:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
.wp-lightbox-container button:hover, .wp-lightbox-container button:focus, .wp-lightbox-container button:not(:hover):not(:active):not(.has-background) {
|
||||
background-color: rgba(90, 90, 90, 0.25);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.wp-lightbox-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100000;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
visibility: hidden;
|
||||
cursor: zoom-out;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-close-button {
|
||||
font-family: inherit;
|
||||
position: absolute;
|
||||
top: calc(env(safe-area-inset-top) + 16px);
|
||||
right: calc(env(safe-area-inset-right) + 16px);
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
z-index: 5000000;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-close-button:hover, .wp-lightbox-overlay .wp-lightbox-close-button:focus, .wp-lightbox-overlay .wp-lightbox-close-button:not(:hover):not(:active):not(.has-background) {
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-close-button:has(.wp-lightbox-close-text:not([hidden])) .wp-lightbox-close-icon svg {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-close-icon svg {
|
||||
display: block;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
|
||||
position: absolute;
|
||||
padding: 0 8px;
|
||||
z-index: 2000002;
|
||||
font-family: inherit;
|
||||
min-width: 40px;
|
||||
min-height: 40px;
|
||||
gap: 4px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
bottom: 16px;
|
||||
line-height: 1;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev[hidden],
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next[hidden] {
|
||||
display: none;
|
||||
}
|
||||
@media (min-width: 960px) {
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev,
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
|
||||
bottom: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:hover, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:focus, .wp-lightbox-overlay .wp-lightbox-navigation-button-prev:not(:hover):not(:active):not(.has-background),
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:hover,
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:focus,
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:not(:hover):not(:active):not(.has-background) {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0 8px;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev:has(.wp-lightbox-navigation-text:not([hidden])) .wp-lightbox-navigation-icon svg,
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next:has(.wp-lightbox-navigation-text:not([hidden])) .wp-lightbox-navigation-icon svg {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
display: block;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-prev {
|
||||
left: calc(env(safe-area-inset-left) + 16px);
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-button-next {
|
||||
right: calc(env(safe-area-inset-right) + 16px);
|
||||
}
|
||||
.wp-lightbox-overlay .wp-lightbox-navigation-icon svg {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.wp-lightbox-overlay .lightbox-image-container {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform-origin: top left;
|
||||
transform: translate(-50%, -50%);
|
||||
width: var(--wp--lightbox-container-width);
|
||||
height: var(--wp--lightbox-container-height);
|
||||
z-index: 2000001;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image {
|
||||
position: relative;
|
||||
transform-origin: 0 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
z-index: 3000000;
|
||||
margin: 0;
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image img {
|
||||
min-width: var(--wp--lightbox-image-width);
|
||||
min-height: var(--wp--lightbox-image-height);
|
||||
width: var(--wp--lightbox-image-width);
|
||||
height: var(--wp--lightbox-image-height);
|
||||
}
|
||||
.wp-lightbox-overlay .wp-block-image figcaption {
|
||||
display: none;
|
||||
}
|
||||
.wp-lightbox-overlay button {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
.wp-lightbox-overlay .scrim {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 2000000;
|
||||
background-color: rgb(255, 255, 255);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.wp-lightbox-overlay.active {
|
||||
visibility: visible;
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-overlay.active {
|
||||
animation: both turn-on-visibility 0.25s;
|
||||
}
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-overlay.active img {
|
||||
animation: both turn-on-visibility 0.35s;
|
||||
}
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-overlay.show-closing-animation:not(.active) {
|
||||
animation: both turn-off-visibility 0.35s;
|
||||
}
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-overlay.show-closing-animation:not(.active) img {
|
||||
animation: both turn-off-visibility 0.25s;
|
||||
}
|
||||
}
|
||||
@media not (prefers-reduced-motion) {
|
||||
.wp-lightbox-overlay.zoom.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
animation: none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .lightbox-image-container {
|
||||
animation: lightbox-zoom-in 0.4s;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .lightbox-image-container img {
|
||||
animation: none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.active .scrim {
|
||||
animation: turn-on-visibility 0.4s forwards;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) {
|
||||
animation: none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container {
|
||||
animation: lightbox-zoom-out 0.4s;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .lightbox-image-container img {
|
||||
animation: none;
|
||||
}
|
||||
.wp-lightbox-overlay.zoom.show-closing-animation:not(.active) .scrim {
|
||||
animation: turn-off-visibility 0.4s forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes show-content-image {
|
||||
0% {
|
||||
visibility: hidden;
|
||||
}
|
||||
99% {
|
||||
visibility: hidden;
|
||||
}
|
||||
100% {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
@keyframes turn-on-visibility {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes turn-off-visibility {
|
||||
0% {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
99% {
|
||||
opacity: 0;
|
||||
visibility: visible;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
@keyframes lightbox-zoom-in {
|
||||
0% {
|
||||
transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes lightbox-zoom-out {
|
||||
0% {
|
||||
visibility: visible;
|
||||
transform: translate(-50%, -50%) scale(1, 1);
|
||||
}
|
||||
99% {
|
||||
visibility: visible;
|
||||
}
|
||||
100% {
|
||||
visibility: hidden;
|
||||
transform: translate(calc((-100vw + var(--wp--lightbox-scrollbar-width)) / 2 + var(--wp--lightbox-initial-left-position)), calc(-50vh + var(--wp--lightbox-initial-top-position))) scale(var(--wp--lightbox-scale));
|
||||
}
|
||||
}
|
||||
1
wp-includes/blocks/image/style.min.css
vendored
Normal file
1
wp-includes/blocks/image/style.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
101
wp-includes/blocks/image/theme-rtl.css
Normal file
101
wp-includes/blocks/image/theme-rtl.css
Normal file
@@ -0,0 +1,101 @@
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* SCSS Variables.
|
||||
*
|
||||
* Please use variables from this sheet to ensure consistency across the UI.
|
||||
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
|
||||
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
|
||||
*/
|
||||
/**
|
||||
* Colors
|
||||
*/
|
||||
/**
|
||||
* Fonts & basic variables.
|
||||
*/
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* Grid System.
|
||||
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
|
||||
*/
|
||||
/**
|
||||
* Radius scale.
|
||||
*/
|
||||
/**
|
||||
* Elevation scale.
|
||||
*/
|
||||
/**
|
||||
* Dimensions.
|
||||
*/
|
||||
/**
|
||||
* Mobile specific styles
|
||||
*/
|
||||
/**
|
||||
* Editor styles.
|
||||
*/
|
||||
/**
|
||||
* Block & Editor UI.
|
||||
*/
|
||||
/**
|
||||
* Block paddings.
|
||||
*/
|
||||
/**
|
||||
* React Native specific.
|
||||
* These variables do not appear to be used anywhere else.
|
||||
*/
|
||||
/**
|
||||
* Breakpoints & Media Queries
|
||||
*/
|
||||
/**
|
||||
* Converts a hex value into the rgb equivalent.
|
||||
*
|
||||
* @param {string} hex - the hexadecimal value to convert
|
||||
* @return {string} comma separated rgb values
|
||||
*/
|
||||
/**
|
||||
* Long content fade mixin
|
||||
*
|
||||
* Creates a fading overlay to signify that the content is longer
|
||||
* than the space allows.
|
||||
*/
|
||||
/**
|
||||
* Breakpoint mixins
|
||||
*/
|
||||
/**
|
||||
* Focus styles.
|
||||
*/
|
||||
/**
|
||||
* Applies editor left position to the selector passed as argument
|
||||
*/
|
||||
/**
|
||||
* Styles that are reused verbatim in a few places
|
||||
*/
|
||||
/**
|
||||
* Allows users to opt-out of animations via OS-level preferences.
|
||||
*/
|
||||
/**
|
||||
* Reset default styles for JavaScript UI based pages.
|
||||
* This is a WP-admin agnostic reset
|
||||
*/
|
||||
/**
|
||||
* Reset the WP Admin page styles for Gutenberg-like pages.
|
||||
*/
|
||||
/**
|
||||
* Creates a checkerboard pattern background to indicate transparency.
|
||||
* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
|
||||
*/
|
||||
:root :where(.wp-block-image figcaption) {
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
.is-dark-theme :root :where(.wp-block-image figcaption) {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
.wp-block-image {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
1
wp-includes/blocks/image/theme-rtl.min.css
vendored
Normal file
1
wp-includes/blocks/image/theme-rtl.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
:root :where(.wp-block-image figcaption){color:#555;font-size:13px;text-align:center}.is-dark-theme :root :where(.wp-block-image figcaption){color:#ffffffa6}.wp-block-image{margin:0 0 1em}
|
||||
101
wp-includes/blocks/image/theme.css
Normal file
101
wp-includes/blocks/image/theme.css
Normal file
@@ -0,0 +1,101 @@
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* SCSS Variables.
|
||||
*
|
||||
* Please use variables from this sheet to ensure consistency across the UI.
|
||||
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
|
||||
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
|
||||
*/
|
||||
/**
|
||||
* Colors
|
||||
*/
|
||||
/**
|
||||
* Fonts & basic variables.
|
||||
*/
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
/**
|
||||
* Grid System.
|
||||
* https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
|
||||
*/
|
||||
/**
|
||||
* Radius scale.
|
||||
*/
|
||||
/**
|
||||
* Elevation scale.
|
||||
*/
|
||||
/**
|
||||
* Dimensions.
|
||||
*/
|
||||
/**
|
||||
* Mobile specific styles
|
||||
*/
|
||||
/**
|
||||
* Editor styles.
|
||||
*/
|
||||
/**
|
||||
* Block & Editor UI.
|
||||
*/
|
||||
/**
|
||||
* Block paddings.
|
||||
*/
|
||||
/**
|
||||
* React Native specific.
|
||||
* These variables do not appear to be used anywhere else.
|
||||
*/
|
||||
/**
|
||||
* Breakpoints & Media Queries
|
||||
*/
|
||||
/**
|
||||
* Converts a hex value into the rgb equivalent.
|
||||
*
|
||||
* @param {string} hex - the hexadecimal value to convert
|
||||
* @return {string} comma separated rgb values
|
||||
*/
|
||||
/**
|
||||
* Long content fade mixin
|
||||
*
|
||||
* Creates a fading overlay to signify that the content is longer
|
||||
* than the space allows.
|
||||
*/
|
||||
/**
|
||||
* Breakpoint mixins
|
||||
*/
|
||||
/**
|
||||
* Focus styles.
|
||||
*/
|
||||
/**
|
||||
* Applies editor left position to the selector passed as argument
|
||||
*/
|
||||
/**
|
||||
* Styles that are reused verbatim in a few places
|
||||
*/
|
||||
/**
|
||||
* Allows users to opt-out of animations via OS-level preferences.
|
||||
*/
|
||||
/**
|
||||
* Reset default styles for JavaScript UI based pages.
|
||||
* This is a WP-admin agnostic reset
|
||||
*/
|
||||
/**
|
||||
* Reset the WP Admin page styles for Gutenberg-like pages.
|
||||
*/
|
||||
/**
|
||||
* Creates a checkerboard pattern background to indicate transparency.
|
||||
* @param {String} $size - The size of the squares in the checkerboard pattern. Default is 12px.
|
||||
*/
|
||||
:root :where(.wp-block-image figcaption) {
|
||||
color: #555;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
.is-dark-theme :root :where(.wp-block-image figcaption) {
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
.wp-block-image {
|
||||
margin: 0 0 1em 0;
|
||||
}
|
||||
1
wp-includes/blocks/image/theme.min.css
vendored
Normal file
1
wp-includes/blocks/image/theme.min.css
vendored
Normal file
@@ -0,0 +1 @@
|
||||
:root :where(.wp-block-image figcaption){color:#555;font-size:13px;text-align:center}.is-dark-theme :root :where(.wp-block-image figcaption){color:#ffffffa6}.wp-block-image{margin:0 0 1em}
|
||||
Reference in New Issue
Block a user