block background image settings

resources/js/lib/blocks/AttachmentImage.jsx

@@ -0,0 +1,46 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * AttachmentImage
+ *
+ * This component is used to display an image from the media library.
+ * It's meant as a JS companion to the PHP function `wp_get_attachment_image()`.
+ *
+ * @link https://www.briancoords.com/getting-wordpress-media-library-images-in-javascript/
+ *
+ * @param {object} props
+ * @param {number} props.imageId The ID of the image to display.
+ * @param {string} props.size The size of the image to display. Defaults to 'full'.
+ * @returns {*} React JSX
+ */
+export default function AttachmentImage({ imageId, size = 'full' }) {
+
+	const { image } = useSelect((select) => ({
+		image: select('core').getEntityRecord('postType', 'attachment', imageId),
+	}));
+
+	const imageAttributes = () =>{
+		let attributes = {
+			src: image.source_url,
+			alt: image.alt_text,
+			className: `attachment-${size} size-${size}`,
+			width: image.media_details.width,
+			height: image.media_details.height,
+		};
+		if (image.media_details && image.media_details.sizes && image.media_details.sizes[size]) {
+			attributes.src = image.media_details.sizes[size].source_url;
+			attributes.width = image.media_details.sizes[size].width;
+			attributes.height = image.media_details.sizes[size].height;
+		}
+
+		return attributes;
+	};
+
+	return (
+		<>
+			{image && (
+				<img {...imageAttributes()} />
+			)}
+		</>
+	)
+}

resources/js/lib/blocks/BlockSettings.jsx

@@ -0,0 +1,43 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * BlockSettings
+ *
+ * Bundles the <InspectorControls> used for several blocks
+ * *
+ * @param {object} props
+ * @param {number} props.imageId The ID of the image to display.
+ * @param {string} props.size The size of the image to display. Defaults to 'full'.
+ * @returns {*} React JSX
+ */
+export default function BlockSettings({ imageId, size = 'full' }) {
+
+	const { image } = useSelect((select) => ({
+		image: select('core').getEntityRecord('postType', 'attachment', imageId),
+	}));
+
+	const imageAttributes = () =>{
+		let attributes = {
+			src: image.source_url,
+			alt: image.alt_text,
+			className: `attachment-${size} size-${size}`,
+			width: image.media_details.width,
+			height: image.media_details.height,
+		};
+		if (image.media_details && image.media_details.sizes && image.media_details.sizes[size]) {
+			attributes.src = image.media_details.sizes[size].source_url;
+			attributes.width = image.media_details.sizes[size].width;
+			attributes.height = image.media_details.sizes[size].height;
+		}
+
+		return attributes;
+	};
+
+	return (
+		<>
+			{image && (
+				<img {...imageAttributes()} />
+			)}
+		</>
+	)
+}

resources/js/lib/blocks/classNames.js

@@ -42,6 +42,9 @@ export function sectionClassNames(attributes, defaultClasses, extraClasses = [])
     classNames.push(bg);
   }
 
+  if('background_image'in attributes && attributes.background_image != '0')
+    classNames.push('has-bg-image');
+
   // combine arrays
   classNames = classNames.concat(defaultClasses).concat(extraClasses);