Merge pull request #54 from matchboxdesigngroup/refactor/slider-block

Slider block

assets/blocks/slide/block.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 2,
+  "name": "kindling/slide",
+  "title": "Slide",
+  "category": "design",
+  "editorScript": "file:./index.js",
+  "attributes": {
+    "className": {
+      "type": "string",
+      "default": "swiper-slide"
+    }
+  }
+}

assets/blocks/slide/edit.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+const Edit = (props) => {
+  // Retrieve attributes from props
+  const { attributes } = props;
+  const { className } = attributes;
+
+  // Use useBlockProps to dynamically set the className
+  const blockProps = useBlockProps({
+    className: className || 'swiper-slide', // Fallback to 'swiper-slide' if className is undefined
+  });
+
+  return (
+    <div { ...blockProps }>
+      <InnerBlocks />
+    </div>
+  );
+};
+export default Edit;

assets/blocks/slide/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import Edit from './edit';
+import Save from './save';
+
+// Export this so we can use it in the edit and save files
+export const innerBlocksTemplate = [
+  [ 'kindling/slide-block', { placeholder: 'Enter slide content...' } ],
+];
+
+// Register the block
+registerBlockType( metadata.name, {
+  title: metadata.title,
+	edit: Edit,
+	save: Save,
+} );

assets/blocks/slide/save.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+const Save = () => {
+  const blockProps = useBlockProps.save({
+    className: 'swiper-slide',
+  });
+
+  return (
+    <div {...blockProps}>
+      <InnerBlocks.Content />
+    </div>
+  );
+};
+export default Save;

assets/blocks/slide/style.scss

@@ -0,0 +1,10 @@
+// Editor only
+// .block-editor-block-list__block.wp-block.slider-block {
+//   // editor styles
+// }
+
+// .editor-styles-wrapper .block-editor-block-list__block.wp-block.slider-block {
+//   // editor styles
+// }
+
+// End Editor only