adding a mediaPlaceholder into block when disabling auto-cover

blocks/content-page-header/build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'b7d69e8f13c59d8be58e');
+<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'b8178c4637e6f7dc88cc');

blocks/content-page-header/build/index.css

@@ -5,6 +5,10 @@
   max-width: 200px !important;
 }
 
+.homegrade-blocks-content-page-header .block-editor-media-placeholder {
+  max-height: 200px;
+}
+
 .homegrade-blocks-content-page-header__panel-cta .block-editor-link-control__field {
   margin: 0;
 }

blocks/content-page-header/build/index.css.map

@@ -1 +1 @@
-{"version":3,"file":"index.css","mappings":";;;AACC;EACC;AAAF;;AAKC;EACC;AAFF;AAIC;EACC;AAFF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".block-content-page-header {\r\n\t&__page-icon {\r\n\t\tmax-width: 200px !important;\r\n\t}\r\n}\r\n\r\n.homegrade-blocks-content-page-header__panel-cta {\r\n\t.block-editor-link-control__field {\r\n\t\tmargin: 0;\r\n\t}\r\n\t.block-editor-link-control {\r\n\t\tmin-width: unset;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"index.css","mappings":";;;AACC;EACC;AAAF;;AAIC;EACC;AADF;;AAKC;EACC;AAFF;AAIC;EACC;AAFF,C","sources":["webpack://multiblocks/./src/editor.scss"],"sourcesContent":[".block-content-page-header {\r\n\t&__page-icon {\r\n\t\tmax-width: 200px !important;\r\n\t}\r\n}\r\n.homegrade-blocks-content-page-header {\r\n\t.block-editor-media-placeholder {\r\n\t\tmax-height: 200px;\r\n\t}\r\n}\r\n.homegrade-blocks-content-page-header__panel-cta {\r\n\t.block-editor-link-control__field {\r\n\t\tmargin: 0;\r\n\t}\r\n\t.block-editor-link-control {\r\n\t\tmin-width: unset;\r\n\t}\r\n}\r\n"],"names":[],"sourceRoot":""}

blocks/content-page-header/build/index.js

@@ -59,7 +59,6 @@ function ImageMediaPlaceholder({
     });
   }
   function removeImageAttributes() {
-    console.log("removeImageAttributes");
     setAttributes({
       imageId: null,
       imageAlt: null,
@@ -217,12 +216,6 @@ function ImagePanelBody({
       imageUrl: null
     });
   }
-  function onImageProportionChange(imageProportion) {
-    console.log(imageProportion);
-    setAttributes({
-      imageProportion
-    });
-  }
   return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: imageUrl,
     alt: imageAlt
@@ -468,10 +461,16 @@ function Edit({
     className: "block-content-page-header__page-icon",
     src: pageIcon.source_url,
     alt: ""
-  }), hasCustomImage && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
+  }), hasCustomImage && imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", {
     src: imageUrl,
     alt: imageAlt,
     className: "block-content-page-header__page-icon"
+  }), hasCustomImage && !imageUrl && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_4__.MediaPlaceholder, {
+    accept: "image/*",
+    allowedTypes: ["image"],
+    onSelect: setImageAttributes,
+    multiple: false,
+    handleUpload: true
   })));
 }
 

blocks/content-page-header/src/edit.js

@@ -8,6 +8,7 @@ import {
 	MediaReplaceFlow,
 	InspectorControls,
 	__experimentalLinkControl as LinkControl,
+	MediaPlaceholder,
 } from "@wordpress/block-editor";
 
 import {
@@ -260,13 +261,22 @@ export default function Edit({ attributes, setAttributes }) {
 						alt=""
 					/>
 				)}
-				{hasCustomImage && (
+				{hasCustomImage && imageUrl && (
 					<img
 						src={imageUrl}
 						alt={imageAlt}
 						className="block-content-page-header__page-icon"
 					/>
 				)}
+				{hasCustomImage && !imageUrl && (
+					<MediaPlaceholder
+						accept="image/*"
+						allowedTypes={["image"]}
+						onSelect={setImageAttributes}
+						multiple={false}
+						handleUpload={true}
+					/>
+				)}
 			</section>
 		</>
 	);

blocks/content-page-header/src/editor.scss

@@ -3,7 +3,11 @@
 		max-width: 200px !important;
 	}
 }
-
+.homegrade-blocks-content-page-header {
+	.block-editor-media-placeholder {
+		max-height: 200px;
+	}
+}
 .homegrade-blocks-content-page-header__panel-cta {
 	.block-editor-link-control__field {
 		margin: 0;