diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-includes/blocks/media-text/style.css --- a/wp/wp-includes/blocks/media-text/style.css Thu Sep 29 08:06:27 2022 +0200 +++ b/wp/wp-includes/blocks/media-text/style.css Fri Sep 05 18:40:08 2025 +0200 @@ -1,187 +1,88 @@ -/** - * Colors - */ -/** - * Breakpoints & Media Queries - */ -/** - * 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. - */ -/** - * Grid System. - * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/ - */ -/** - * Dimensions. - */ -/** - * Shadows. - */ -/** - * Editor widths. - */ -/** - * Block & Editor UI. - */ -/** - * Block paddings. - */ -/** - * React Native specific. - * These variables do not appear to be used anywhere else. - */ -/** -* Converts a hex value into the rgb equivalent. -* -* @param {string} hex - the hexadecimal value to convert -* @return {string} comma separated rgb values -*/ -/** - * Breakpoint mixins - */ -/** - * Long content fade mixin - * - * Creates a fading overlay to signify that the content is longer - * than the space allows. - */ -/** - * 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. - */ -.wp-block-media-text { - /*!rtl:begin:ignore*/ - direction: ltr; - /*!rtl:end:ignore*/ - display: grid; - grid-template-columns: 50% 1fr; - grid-template-rows: auto; +.wp-block-media-text{ + box-sizing:border-box; + direction:ltr; + display:grid; + grid-template-columns:50% 1fr; + grid-template-rows:auto; } -.wp-block-media-text.has-media-on-the-right { - grid-template-columns: 1fr 50%; +.wp-block-media-text.has-media-on-the-right{ + grid-template-columns:1fr 50%; +} + +.wp-block-media-text.is-vertically-aligned-top>.wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-top>.wp-block-media-text__media{ + align-self:start; +} + +.wp-block-media-text.is-vertically-aligned-center>.wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-center>.wp-block-media-text__media,.wp-block-media-text>.wp-block-media-text__content,.wp-block-media-text>.wp-block-media-text__media{ + align-self:center; } -.wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__content, -.wp-block-media-text.is-vertically-aligned-top .wp-block-media-text__media { - align-self: start; +.wp-block-media-text.is-vertically-aligned-bottom>.wp-block-media-text__content,.wp-block-media-text.is-vertically-aligned-bottom>.wp-block-media-text__media{ + align-self:end; +} + +.wp-block-media-text>.wp-block-media-text__media{ + grid-column:1; + grid-row:1; + margin:0; +} + +.wp-block-media-text>.wp-block-media-text__content{ + direction:ltr; + grid-column:2; + grid-row:1; + padding:0 8%; + word-break:break-word; +} + +.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__media{ + grid-column:2; + grid-row:1; } -.wp-block-media-text .wp-block-media-text__content, -.wp-block-media-text .wp-block-media-text__media, -.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__content, -.wp-block-media-text.is-vertically-aligned-center .wp-block-media-text__media { - align-self: center; -} - -.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__content, -.wp-block-media-text.is-vertically-aligned-bottom .wp-block-media-text__media { - align-self: end; -} - -.wp-block-media-text .wp-block-media-text__media { - /*!rtl:begin:ignore*/ - grid-column: 1; - grid-row: 1; - /*!rtl:end:ignore*/ - margin: 0; +.wp-block-media-text.has-media-on-the-right>.wp-block-media-text__content{ + grid-column:1; + grid-row:1; } -.wp-block-media-text .wp-block-media-text__content { - direction: ltr; - /*!rtl:begin:ignore*/ - grid-column: 2; - grid-row: 1; - /*!rtl:end:ignore*/ - padding: 0 8% 0 8%; - word-break: break-word; +.wp-block-media-text__media img,.wp-block-media-text__media video{ + height:auto; + max-width:unset; + vertical-align:middle; + width:100%; } -.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { - /*!rtl:begin:ignore*/ - grid-column: 2; - grid-row: 1; - /*!rtl:end:ignore*/ +.wp-block-media-text.is-image-fill>.wp-block-media-text__media{ + background-size:cover; + height:100%; + min-height:250px; } -.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { - /*!rtl:begin:ignore*/ - grid-column: 1; - grid-row: 1; - /*!rtl:end:ignore*/ +.wp-block-media-text.is-image-fill>.wp-block-media-text__media>a{ + display:block; + height:100%; } -.wp-block-media-text__media img, -.wp-block-media-text__media video { - height: auto; - max-width: unset; - width: 100%; - vertical-align: middle; -} - -.wp-block-media-text.is-image-fill .wp-block-media-text__media { - height: 100%; - min-height: 250px; - background-size: cover; -} - -.wp-block-media-text.is-image-fill .wp-block-media-text__media > a { - display: block; - height: 100%; +.wp-block-media-text.is-image-fill>.wp-block-media-text__media img{ + height:1px; + margin:-1px; + overflow:hidden; + padding:0; + position:absolute; + width:1px; + clip:rect(0, 0, 0, 0); + border:0; } - -.wp-block-media-text.is-image-fill .wp-block-media-text__media img { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - border: 0; -} - -/* -* Here we here not able to use a mobile first CSS approach. -* Custom widths are set using inline styles, and on mobile, -* we need 100% width, so we use important to overwrite the inline style. -* If the style were set on mobile first, on desktop styles, -* we would have no way of setting the style again to the inline style. -*/ -@media (max-width: 600px) { - .wp-block-media-text.is-stacked-on-mobile { - grid-template-columns: 100% !important; +@media (max-width:600px){ + .wp-block-media-text.is-stacked-on-mobile{ + grid-template-columns:100% !important; } - .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { - grid-column: 1; - grid-row: 1; + .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__media{ + grid-column:1; + grid-row:1; } - .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { - grid-column: 1; - grid-row: 2; + .wp-block-media-text.is-stacked-on-mobile>.wp-block-media-text__content{ + grid-column:1; + grid-row:2; } } \ No newline at end of file