basic article block backend working

resources/js/blocks/components/BackgroundImage.jsx

@@ -0,0 +1,33 @@
+import { useSelect } from '@wordpress/data';
+
+/**
+ * BackgroundImage
+ *
+ * This component is used to display a background image for a block based on its attributes.
+ *
+ * @param {object} props
+ * @param {string} props.background_image The url of the background image.
+ * @param {string} props.background_position The background-position property.
+ * @param {boolean} props.background_fixed Toggle for background-attachment: fixed.
+ * @param {number} props.background_opacity The opacity value applied to the image.
+ * @returns {*} React JSX
+ */
+export default function BackgroundImage({ background_url, background_position = 'center', background_fixed = false, background_opacity = 70 }) {
+
+	return (
+		<>
+			{background_url && (
+				<div
+          className="badegg-block-background"
+          style={{
+            backgroundImage: `url(${background_url})`,
+            backgroundPosition: background_position,
+            backgroundSize: 'cover',
+            backgroundAttachment: background_fixed ? 'fixed' : 'scroll',
+            opacity: Number(background_opacity) * 0.01,
+          }}
+        />
+			)}
+		</>
+	)
+}

resources/js/blocks/components/BlockSettings.jsx

@@ -0,0 +1,23 @@
+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(props) {
+
+
+
+	return (
+		<>
+
+
+		</>
+	)
+}

resources/js/blocks/lib/classNames.js

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

resources/js/lib/blocks/BlockSettings.jsx

@@ -1,43 +0,0 @@
-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()} />
-			)}
-		</>
-	)
-}