first commit

wp-includes/blocks/media-text/block.json

@@ -0,0 +1,148 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/media-text",
+	"title": "Media & Text",
+	"category": "media",
+	"description": "Set media and words side-by-side for a richer layout.",
+	"keywords": [ "image", "video" ],
+	"textdomain": "default",
+	"attributes": {
+		"align": {
+			"type": "string",
+			"default": "none"
+		},
+		"mediaAlt": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "figure img",
+			"attribute": "alt",
+			"default": "",
+			"role": "content"
+		},
+		"mediaPosition": {
+			"type": "string",
+			"default": "left"
+		},
+		"mediaId": {
+			"type": "number",
+			"role": "content"
+		},
+		"mediaUrl": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "figure video,figure img",
+			"attribute": "src",
+			"role": "content"
+		},
+		"mediaLink": {
+			"type": "string"
+		},
+		"linkDestination": {
+			"type": "string"
+		},
+		"linkTarget": {
+			"type": "string",
+			"source": "attribute",
+			"selector": "figure a",
+			"attribute": "target"
+		},
+		"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"
+		},
+		"mediaType": {
+			"type": "string",
+			"role": "content"
+		},
+		"mediaWidth": {
+			"type": "number",
+			"default": 50
+		},
+		"mediaSizeSlug": {
+			"type": "string"
+		},
+		"isStackedOnMobile": {
+			"type": "boolean",
+			"default": true
+		},
+		"verticalAlignment": {
+			"type": "string"
+		},
+		"imageFill": {
+			"type": "boolean"
+		},
+		"focalPoint": {
+			"type": "object"
+		},
+		"useFeaturedImage": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"usesContext": [ "postId", "postType" ],
+	"supports": {
+		"anchor": true,
+		"align": [ "wide", "full" ],
+		"html": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"color": {
+			"gradients": true,
+			"heading": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"interactivity": {
+			"clientNavigation": true
+		},
+		"allowedBlocks": true
+	},
+	"editorStyle": "wp-block-media-text-editor",
+	"style": "wp-block-media-text"
+}

wp-includes/blocks/media-text/editor-rtl.css

@@ -0,0 +1,38 @@
+.wp-block-media-text__media {
+  position: relative;
+}
+.wp-block-media-text__media.is-transient img {
+  opacity: 0.3;
+}
+.wp-block-media-text__media .components-spinner {
+  position: absolute;
+  top: 50%;
+  right: 50%;
+  margin-top: -9px;
+  margin-right: -9px;
+}
+
+.wp-block-media-text .__resizable_base__ {
+  grid-column: 1/span 2;
+  grid-row: 2;
+}
+
+.wp-block-media-text .editor-media-container__resizer {
+  width: 100% !important;
+}
+
+.wp-block-media-text.is-image-fill .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
+.wp-block-media-text.is-image-fill-element .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration {
+  height: 100% !important;
+}
+
+.wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
+  max-width: unset;
+}
+
+/* Make the featured image placeholder the same height as the media selection area. */
+.wp-block-media-text--placeholder-image {
+  min-height: 205px;
+}

wp-includes/blocks/media-text/editor-rtl.min.css

@@ -0,0 +1 @@
+.wp-block-media-text__media{position:relative}.wp-block-media-text__media.is-transient img{opacity:.3}.wp-block-media-text__media .components-spinner{margin-right:-9px;margin-top:-9px;position:absolute;right:50%;top:50%}.wp-block-media-text .__resizable_base__{grid-column:1/span 2;grid-row:2}.wp-block-media-text .editor-media-container__resizer{width:100%!important}.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,.wp-block-media-text.is-image-fill .editor-media-container__resizer,.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration,.wp-block-media-text.is-image-fill-element .editor-media-container__resizer{height:100%!important}.wp-block-media-text>.block-editor-block-list__layout>.block-editor-block-list__block{max-width:unset}.wp-block-media-text--placeholder-image{min-height:205px}

wp-includes/blocks/media-text/editor.css

@@ -0,0 +1,38 @@
+.wp-block-media-text__media {
+  position: relative;
+}
+.wp-block-media-text__media.is-transient img {
+  opacity: 0.3;
+}
+.wp-block-media-text__media .components-spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -9px;
+  margin-left: -9px;
+}
+
+.wp-block-media-text .__resizable_base__ {
+  grid-column: 1/span 2;
+  grid-row: 2;
+}
+
+.wp-block-media-text .editor-media-container__resizer {
+  width: 100% !important;
+}
+
+.wp-block-media-text.is-image-fill .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,
+.wp-block-media-text.is-image-fill-element .editor-media-container__resizer,
+.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration {
+  height: 100% !important;
+}
+
+.wp-block-media-text > .block-editor-block-list__layout > .block-editor-block-list__block {
+  max-width: unset;
+}
+
+/* Make the featured image placeholder the same height as the media selection area. */
+.wp-block-media-text--placeholder-image {
+  min-height: 205px;
+}

wp-includes/blocks/media-text/editor.min.css

@@ -0,0 +1 @@
+.wp-block-media-text__media{position:relative}.wp-block-media-text__media.is-transient img{opacity:.3}.wp-block-media-text__media .components-spinner{left:50%;margin-left:-9px;margin-top:-9px;position:absolute;top:50%}.wp-block-media-text .__resizable_base__{grid-column:1/span 2;grid-row:2}.wp-block-media-text .editor-media-container__resizer{width:100%!important}.wp-block-media-text.is-image-fill .components-placeholder.has-illustration,.wp-block-media-text.is-image-fill .editor-media-container__resizer,.wp-block-media-text.is-image-fill-element .components-placeholder.has-illustration,.wp-block-media-text.is-image-fill-element .editor-media-container__resizer{height:100%!important}.wp-block-media-text>.block-editor-block-list__layout>.block-editor-block-list__block{max-width:unset}.wp-block-media-text--placeholder-image{min-height:205px}

wp-includes/blocks/media-text/style-rtl.css

@@ -0,0 +1,129 @@
+/**
+ * Breakpoints & Media Queries
+ */
+.wp-block-media-text {
+  direction: ltr;
+  display: grid;
+  grid-template-columns: 50% 1fr;
+  grid-template-rows: auto;
+  box-sizing: border-box;
+}
+.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 > .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 {
+  grid-column: 1;
+  grid-row: 1;
+  margin: 0;
+}
+
+.wp-block-media-text > .wp-block-media-text__content {
+  direction: rtl;
+  grid-column: 2;
+  grid-row: 1;
+  padding: 0 8% 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.has-media-on-the-right > .wp-block-media-text__content {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.wp-block-media-text__media a {
+  display: block;
+}
+
+.wp-block-media-text__media img,
+.wp-block-media-text__media video {
+  height: auto;
+  max-width: unset;
+  width: 100%;
+  vertical-align: middle;
+}
+
+/* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
+.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 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+/* Image fill for versions 8 and onwards */
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+  position: relative;
+  height: 100%;
+  min-height: 250px;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
+  display: block;
+  height: 100%;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/*
+* 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;
+  }
+  .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-includes/blocks/media-text/style-rtl.min.css

@@ -0,0 +1 @@
+.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.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-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:rtl;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.has-media-on-the-right>.wp-block-media-text__content{grid-column:1;grid-row:1}.wp-block-media-text__media a{display:block}.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.is-image-fill>.wp-block-media-text__media{background-size:cover;height:100%;min-height:250px}.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{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media{height:100%;min-height:250px;position:relative}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media>a{display:block;height:100%}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media img{height:100%;object-fit:cover;position:absolute;width:100%}@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__content{grid-column:1;grid-row:2}}

wp-includes/blocks/media-text/style.css

@@ -0,0 +1,139 @@
+/**
+ * Breakpoints & Media Queries
+ */
+.wp-block-media-text {
+  /*rtl:begin:ignore*/
+  direction: ltr;
+  /*rtl:end:ignore*/
+  display: grid;
+  grid-template-columns: 50% 1fr;
+  grid-template-rows: auto;
+  box-sizing: border-box;
+}
+.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 > .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 > .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.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.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__media a {
+  display: block;
+}
+
+.wp-block-media-text__media img,
+.wp-block-media-text__media video {
+  height: auto;
+  max-width: unset;
+  width: 100%;
+  vertical-align: middle;
+}
+
+/* `is-image-fill` is deprecated and the styles are kept for backwards compatibility. */
+.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 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+/* Image fill for versions 8 and onwards */
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media {
+  position: relative;
+  height: 100%;
+  min-height: 250px;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media > a {
+  display: block;
+  height: 100%;
+}
+
+.wp-block-media-text.is-image-fill-element > .wp-block-media-text__media img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/*
+* 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;
+  }
+  .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-includes/blocks/media-text/style.min.css

@@ -0,0 +1 @@
+.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.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-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.has-media-on-the-right>.wp-block-media-text__content{grid-column:1;grid-row:1}.wp-block-media-text__media a{display:block}.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.is-image-fill>.wp-block-media-text__media{background-size:cover;height:100%;min-height:250px}.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{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media{height:100%;min-height:250px;position:relative}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media>a{display:block;height:100%}.wp-block-media-text.is-image-fill-element>.wp-block-media-text__media img{height:100%;object-fit:cover;position:absolute;width:100%}@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__content{grid-column:1;grid-row:2}}