updates block name and attributes

build/block.json

@@ -11,10 +11,10 @@
     "html": false
   },
   "attributes": {
-    "imageOne": {
+    "foregroundImage": {
       "type": "integer"
     },
-    "imageTwo": {
+    "backgroundImage": {
       "type": "integer"
     }
   },

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-rich-text', 'wp-url'), 'version' => '9ad480287acafeb4cf4b');
+<?php return array('dependencies' => array('react', 'react-dom', 'wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-editor', 'wp-element', 'wp-hooks', 'wp-html-entities', 'wp-i18n', 'wp-rich-text', 'wp-url'), 'version' => '239a7b52eeef205c26a6');

build/index.js

@@ -8393,60 +8393,60 @@ function Edit(props) {
     setAttributes
   } = props;
   const {
-    imageOne,
-    imageTwo
+    foregroundImage,
+    backgroundImage
   } = attributes;
-  const handleImageSelect = image => {
+  const handleForegroundImageSelect = image => {
     setAttributes({
-      imageOne: image.id
+      foregroundImage: image.id
     });
   };
-  const handleImageTwoSelect = image => {
+  const handleBackgroundImageSelect = image => {
     setAttributes({
-      imageTwo: image.id
+      backgroundImage: image.id
     });
   };
-  const handleImageRemove = () => {
+  const handleForegroundImageRemove = () => {
     setAttributes({
-      imageOne: null
+      foregroundImage: null
     });
   };
-  const handleImageTwoRemove = () => {
+  const handleBackgroundImageRemove = () => {
     setAttributes({
-      imageTwo: null
+      backgroundImage: null
     });
   };
   return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("div", (0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.useBlockProps)(), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.InspectorControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Panel, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelBody, {
     title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_1__.__)('Background Image Settings', 'double-image')
   }, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_10up_block_components__WEBPACK_IMPORTED_MODULE_4__.Image, {
-    id: imageTwo,
+    id: backgroundImage,
     className: "my-image",
     size: "full",
-    onSelect: handleImageTwoSelect,
+    onSelect: handleBackgroundImageSelect,
     labels: {
       title: 'Select Background Image',
       instructions: 'Upload a media file or pick one from your media library.'
     }
   })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.PanelRow, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.Button, {
     isDestructive: true,
     variant: "link",
-    onClick: handleImageTwoRemove
+    onClick: handleBackgroundImageRemove
   }, "Remove Background Image"))))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.BlockControls, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_10up_block_components__WEBPACK_IMPORTED_MODULE_4__.MediaToolbar, {
     isOptional: true,
-    id: imageOne,
-    onSelect: handleImageSelect,
-    onRemove: handleImageRemove
+    id: foregroundImage,
+    onSelect: handleForegroundImageSelect,
+    onRemove: handleForegroundImageRemove
   })), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_10up_block_components__WEBPACK_IMPORTED_MODULE_4__.Image, {
-    id: imageOne,
+    id: foregroundImage,
     className: "my-image",
     size: "full",
-    onSelect: handleImageSelect,
+    onSelect: handleForegroundImageSelect,
     labels: {
       title: 'Select Foreground Image',
       instructions: 'Upload a media file or pick one from your media library.'
     }
-  }), imageTwo && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_AttachmentImage__WEBPACK_IMPORTED_MODULE_6__["default"], {
-    imageId: imageTwo
+  }), backgroundImage && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_AttachmentImage__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    imageId: backgroundImage
   }));
 }
 
@@ -13930,7 +13930,7 @@ function combine (array, callback) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"wpdev/double-image","version":"0.1.0","title":"Double Image","category":"widgets","icon":"smiley","description":"Example block scaffolded with Create Block tool.","supports":{"html":false},"attributes":{"imageOne":{"type":"integer"},"imageTwo":{"type":"integer"}},"textdomain":"double-image","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php"}');
+module.exports = JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":2,"name":"wpdev/double-image","version":"0.1.0","title":"Double Image","category":"widgets","icon":"smiley","description":"Example block scaffolded with Create Block tool.","supports":{"html":false},"attributes":{"foregroundImage":{"type":"integer"},"backgroundImage":{"type":"integer"}},"textdomain":"double-image","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","render":"file:./render.php"}');
 
 /***/ })
 

build/render.php

@@ -6,17 +6,18 @@
  * @param string $content The block content.
  * @param WP_Block $block The block object.
  *
- * @package double-image
+ * @package wpdev
  */
+
 ?>
 
 <div <?php echo get_block_wrapper_attributes(); ?> tabindex="0">
 	<?php
-	if ( $attributes['imageOne'] ) {
-		echo wp_get_attachment_image( $attributes['imageOne'], 'full' );
+	if ( $attributes['foregroundImage'] ) {
+		echo wp_get_attachment_image( $attributes['foregroundImage'], 'full' );
 	}
-	if ( $attributes['imageTwo'] ) {
-		echo wp_get_attachment_image( $attributes['imageTwo'], 'full' );
+	if ( $attributes['backgroundImage'] ) {
+		echo wp_get_attachment_image( $attributes['backgroundImage'], 'full' );
 	}
 	?>
 </div>

double-image.php → example-image-block.php

@@ -1,11 +1,11 @@
 <?php
 /**
- * Plugin Name:       Double Image
+ * Plugin Name:       Example Double Image Block
  * Description:       Example block scaffolded with Create Block tool.
  * Requires at least: 6.1
  * Requires PHP:      7.0
  * Version:           0.1.0
- * Author:            The WordPress Contributors
+ * Author:            Brian Coords
  * License:           GPL-2.0-or-later
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
  * Text Domain:       double-image

readme.txt

@@ -1,55 +1,9 @@
-=== Double Image ===
-Contributors:      The WordPress Contributors
+=== Example Double Image Block ===
+Contributors:      bacoords
 Tags:              block
 Tested up to:      6.1
 Stable tag:        0.1.0
 License:           GPL-2.0-or-later
 License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 
-Example block scaffolded with Create Block tool.
-
-== Description ==
-
-This is the long description. No limit, and you can use Markdown (as well as in the following sections).
-
-For backwards compatibility, if this section is missing, the full length of the short description will be used, and
-Markdown parsed.
-
-== Installation ==
-
-This section describes how to install the plugin and get it working.
-
-e.g.
-
-1. Upload the plugin files to the `/wp-content/plugins/double-image` directory, or install the plugin through the WordPress plugins screen directly.
-1. Activate the plugin through the 'Plugins' screen in WordPress
-
-
-== Frequently Asked Questions ==
-
-= A question that someone might have =
-
-An answer to that question.
-
-= What about foo bar? =
-
-Answer to foo bar dilemma.
-
-== Screenshots ==
-
-1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
-the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
-directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
-(or jpg, jpeg, gif).
-2. This is the second screen shot
-
-== Changelog ==
-
-= 0.1.0 =
-* Release
-
-== Arbitrary section ==
-
-You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
-plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
-"installation." Arbitrary sections will be shown below the built-in sections outlined above.
+Example "double image" block scaffolded with Create Block tool.

src/block.json

@@ -11,10 +11,10 @@
 		"html": false
 	},
 	"attributes" : {
-		"imageOne": {
+		"foregroundImage": {
 			"type": "integer"
 		},
-		"imageTwo": {
+		"backgroundImage": {
 			"type": "integer"
 		}
 	},

src/edit.js

@@ -35,28 +35,28 @@ import AttachmentImage from './AttachmentImage';
  */
 export default function Edit(props) {
 	const { attributes, setAttributes } = props;
-	const { imageOne, imageTwo } = attributes;
+	const { foregroundImage, backgroundImage } = attributes;
 
-	const handleImageSelect = (image) => {
+	const handleForegroundImageSelect = (image) => {
 		setAttributes({
-			imageOne: image.id,
+			foregroundImage: image.id,
 		});
 	};
 
-	const handleImageTwoSelect = (image) => {
+	const handleBackgroundImageSelect = (image) => {
 		setAttributes({
-			imageTwo: image.id,
+			backgroundImage: image.id,
 		});
 	};
 
-	const handleImageRemove = () => {
+	const handleForegroundImageRemove = () => {
 		setAttributes({
-			imageOne: null,
+			foregroundImage: null,
 		});
 	};
-	const handleImageTwoRemove = () => {
+	const handleBackgroundImageRemove = () => {
 		setAttributes({
-			imageTwo: null,
+			backgroundImage: null,
 		});
 	};
 
@@ -70,10 +70,10 @@ export default function Edit(props) {
 						<PanelRow>
 
 							<Image
-								id={imageTwo}
+								id={backgroundImage}
 								className="my-image"
 								size="full"
-								onSelect={handleImageTwoSelect}
+								onSelect={handleBackgroundImageSelect}
 								labels={{
 									title: 'Select Background Image',
 									instructions: 'Upload a media file or pick one from your media library.'
@@ -82,7 +82,7 @@ export default function Edit(props) {
 
 						</PanelRow>
 						<PanelRow>
-							<Button isDestructive variant="link" onClick={handleImageTwoRemove}>Remove Background Image</Button>
+							<Button isDestructive variant="link" onClick={handleBackgroundImageRemove}>Remove Background Image</Button>
 						</PanelRow>
 					</PanelBody>
 				</Panel>
@@ -91,22 +91,22 @@ export default function Edit(props) {
             <BlockControls>
                 <MediaToolbar
                     isOptional
-                    id={ imageOne }
-                    onSelect={ handleImageSelect }
-                    onRemove={ handleImageRemove }
+                    id={ foregroundImage }
+                    onSelect={ handleForegroundImageSelect }
+                    onRemove={ handleForegroundImageRemove }
                 />
             </BlockControls>
 			<Image
-				id={imageOne}
+				id={foregroundImage}
 				className="my-image"
 				size="full"
-				onSelect={handleImageSelect}
+				onSelect={handleForegroundImageSelect}
 				labels={{
 					title: 'Select Foreground Image',
 					instructions: 'Upload a media file or pick one from your media library.'
 				}}
 			/>
-			{ imageTwo && (<AttachmentImage imageId={imageTwo}  />) }
+			{ backgroundImage && (<AttachmentImage imageId={backgroundImage}  />) }
 		</div>
 	);
 }

src/render.php

@@ -6,17 +6,18 @@
  * @param string $content The block content.
  * @param WP_Block $block The block object.
  *
- * @package double-image
+ * @package wpdev
  */
+
 ?>
 
 <div <?php echo get_block_wrapper_attributes(); ?> tabindex="0">
 	<?php
-	if ( $attributes['imageOne'] ) {
-		echo wp_get_attachment_image( $attributes['imageOne'], 'full' );
+	if ( $attributes['foregroundImage'] ) {
+		echo wp_get_attachment_image( $attributes['foregroundImage'], 'full' );
 	}
-	if ( $attributes['imageTwo'] ) {
-		echo wp_get_attachment_image( $attributes['imageTwo'], 'full' );
+	if ( $attributes['backgroundImage'] ) {
+		echo wp_get_attachment_image( $attributes['backgroundImage'], 'full' );
 	}
 	?>
 </div>