basic article block backend working

app/blocks.php

@@ -147,6 +147,14 @@ add_action('init', function () {
                     'type' => 'string',
                     'default' => '',
                 ],
+                'background_fixed' => [
+                    'type' => 'boolean',
+                    'default' => false,
+                ],
+                'background_contrast' => [
+                    'type' => 'boolean',
+                    'default' => false,
+                ],
             ],
         ];
 

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()} />
-			)}
-		</>
-	)
-}

resources/views/blocks/article/index.jsx

@@ -30,8 +30,9 @@ import {
 import { useState, useEffect } from '@wordpress/element';
 import metadata from './block.json';
 import allowedBlocks from '../../../json/core-block-whitelist.json';
-import { containerClassNames, sectionClassNames } from '../../../js/lib/blocks/classNames';
+import { containerClassNames, sectionClassNames } from '../../../js/blocks/lib/classNames';
-import AttachmentImage from '../../../js/lib/blocks/AttachmentImage';
+import AttachmentImage from '../../../js/blocks/components/AttachmentImage';
+import BackgroundImage from '../../../js/blocks/components/BackgroundImage';
 
 import apiFetch from '@wordpress/api-fetch';
 
@@ -52,6 +53,8 @@ registerBlockType(metadata.name, {
       background_url,
       background_position,
       background_opacity,
+      background_contrast,
+      background_fixed,
     } = attributes;
 
     const [
@@ -111,10 +114,7 @@ registerBlockType(metadata.name, {
                 __nextHasNoMarginBottom
               />
             </PanelBody>
-            <PanelBody
+            <PanelBody title={ __("Background", "badegg") }>
-              title={ __("Background", "badegg") }
-              initialOpen={ false }
-            >
               <p style={{ textTransform: 'uppercase', fontSize: '11px' }} className="components-truncate components-text components-input-control__label">
                 { __('Colour', 'badegg') }
               </p>
@@ -160,9 +160,21 @@ registerBlockType(metadata.name, {
 
               { background_image != 0 && (
                 <>
-                  <AttachmentImage
+                  {/* <AttachmentImage
                     imageId={ background_image }
                     size="thumbnail"
+                  /> */}
+                  <ToggleControl
+                    label={ __('Text Contrast', 'badegg') }
+                    checked={ background_contrast }
+                    onChange={(value) => setAttributes({ background_contrast: value }) }
+                    __nextHasNoMarginBottom
+                  />
+                  <ToggleControl
+                    label={ __('Fixed Position', 'badegg') }
+                    checked={ background_fixed }
+                    onChange={(value) => setAttributes({ background_fixed: value }) }
+                    __nextHasNoMarginBottom
                   />
                   <RangeControl
                     __next40pxDefaultSize
@@ -226,16 +238,7 @@ registerBlockType(metadata.name, {
           />
         </div>
 
-        { attributes.background_image != 0 && (
+        <BackgroundImage { ...attributes } />
-          <div
-            className="badegg-block-background"
-            style={{
-              backgroundImage: `url(${background_url})`,
-              backgroundPosition: background_position,
-              opacity: Number(background_opacity) * 0.01,
-            }}
-          />
-        ) }
 
       </div>
     );
@@ -243,7 +246,7 @@ registerBlockType(metadata.name, {
   save({ attributes }) {
     return (
       <div { ...useBlockProps.save() }>
-        <div className={ containerClassNames(attributes).join() }>
+        <div className={ containerClassNames(attributes).join(' ') }>
           <InnerBlocks.Content />
         </div>
       </div>