Merge pull request #2329 from Codeinwp/feat/timeline-block-3

feat: add Timeline block
Codeinwp · Aug 7, 2024 · 24aac67 · 24aac67
2 parents e3ffb85 + 5544075
commit 24aac67
Show file tree

Hide file tree

Showing 24 changed files with 1,311 additions and 1 deletion.
diff --git a/blocks.json b/blocks.json
@@ -281,5 +281,15 @@
 	},
 	"content-generator": {
 		"block": "blocks/blocks/content-generator/block.json"
+	},
+	"timeline": {
+		"block": "blocks/blocks/timeline/group/block.json",
+		"assets": {
+			"timeline/editor.css": "blocks/blocks/timeline/editor.scss",
+			"timeline/style.css": "blocks/blocks/timeline/style.scss"
+		}
+	},
+	"timeline-item": {
+		"block": "blocks/blocks/timeline/item/block.json"
 	}
 }
diff --git a/inc/class-base-css.php b/inc/class-base-css.php
@@ -97,6 +97,8 @@ public function autoload_block_classes() {
 			'\ThemeIsle\GutenbergBlocks\CSS\Blocks\Tabs_CSS',
 			'\ThemeIsle\GutenbergBlocks\CSS\Blocks\Posts_CSS',
 			'\ThemeIsle\GutenbergBlocks\CSS\Blocks\Sharing_Icons_CSS',
+			'\ThemeIsle\GutenbergBlocks\CSS\Blocks\Timeline_CSS',
+			'\ThemeIsle\GutenbergBlocks\CSS\Blocks\Timeline_Item_CSS',
 		);
 
 		self::$blocks_classes = apply_filters( 'otter_blocks_register_css', self::$blocks_classes );

diff --git a/inc/class-registration.php b/inc/class-registration.php
@@ -762,6 +762,8 @@ public function register_blocks() {
 			'tabs',
 			'tabs-item',
 			'testimonials',
+			'timeline',
+			'timeline-item',
 		);
 
 		self::$blocks = apply_filters( 'otter_blocks_register_blocks', self::$blocks );
@@ -780,6 +782,7 @@ public function register_blocks() {
 				'font-awesome-icons' => array( 'font-awesome-5', 'font-awesome-4-shims' ),
 				'icon-list-item'     => array( 'font-awesome-5', 'font-awesome-4-shims' ),
 				'plugin-cards'       => array( 'font-awesome-5', 'font-awesome-4-shims' ),
+				'timeline-item'      => array( 'font-awesome-5', 'font-awesome-4-shims' ),
 			)
 		);
 
@@ -944,6 +947,13 @@ public function subscribe_fa( $block_content, $block ) {
 			}
 		}
 
+		if ( 'themeisle-blocks/timeline-item' === $block['blockName'] &&
+			( isset( $block['innerHTML'] ) && false !== strpos( $block['innerHTML'], 'fa-' ) )
+		) {
+			self::$is_fa_loaded = true;
+			return $block_content;
+		}
+
 		return $block_content;
 	}
 

diff --git a/inc/css/blocks/class-timeline-css.php b/inc/css/blocks/class-timeline-css.php
@@ -0,0 +1,117 @@
+<?php
+/**
+ * Css handling logic for blocks.
+ *
+ * @package ThemeIsle\GutenbergBlocks\CSS\Blocks
+ */
+
+namespace ThemeIsle\GutenbergBlocks\CSS\Blocks;
+
+use ThemeIsle\GutenbergBlocks\Base_CSS;
+
+use ThemeIsle\GutenbergBlocks\CSS\CSS_Utility;
+
+/**
+ * Class Timeline_CSS
+ */
+class Timeline_CSS extends Base_CSS {
+
+	/**
+	 * The namespace under which the blocks are registered.
+	 *
+	 * @var string
+	 */
+	public $block_prefix = 'timeline';
+
+	/**
+	 * Generate Timeline CSS
+	 *
+	 * @param mixed $block Block data.
+	 * @return string
+	 * @since   2.7.0
+	 * @access  public
+	 */
+	public function render_css( $block ) {
+		$css = new CSS_Utility( $block );
+
+		$css->add_item(
+			array(
+				'properties' => array(
+					array(
+						'property' => '--o-timeline-cnt-bg',
+						'value'    => 'containerBackgroundColor',
+					),
+					array(
+						'property' => '--o-timeline-cnt-br-c',
+						'value'    => 'containerBorderColor',
+					),
+					array(
+						'property' => '--o-timeline-i-font-size',
+						'value'    => 'iconSize',
+					),
+					array(
+						'property' => '--o-timeline-i-color',
+						'value'    => 'iconColor',
+					),
+					array(
+						'property' => '--o-timeline-v-color',
+						'value'    => 'verticalLineColor',
+					),
+					array(
+						'property' => '--o-timeline-v-width',
+						'value'    => 'verticalLineWidth',
+					),
+					array(
+						'property' => '--o-timeline-cnt-br-w',
+						'value'    => 'containerBorder',
+						'format'   => function( $value, $attrs ) {
+							return CSS_Utility::box_values(
+								$value,
+								array(
+									'left'   => '8px',
+									'right'  => '8px',
+									'top'    => '8px',
+									'bottom' => '8px',
+								)
+							);
+						},
+					),
+					array(
+						'property' => '--o-timeline-cnt-br-r',
+						'value'    => 'containerRadius',
+						'format'   => function( $value, $attrs ) {
+							return CSS_Utility::box_values(
+								$value,
+								array(
+									'left'   => '8px',
+									'right'  => '8px',
+									'top'    => '8px',
+									'bottom' => '8px',
+								)
+							);
+						},
+					),
+					array(
+						'property' => '--o-timeline-cnt-pd',
+						'value'    => 'containerPadding',
+						'format'   => function( $value, $attrs ) {
+							return CSS_Utility::box_values(
+								$value,
+								array(
+									'left'   => '20px',
+									'right'  => '20px',
+									'top'    => '20px',
+									'bottom' => '20px',
+								)
+							);
+						},
+					),
+				),
+			)
+		);
+
+		$style = $css->generate();
+
+		return $style;
+	}
+}
diff --git a/inc/css/blocks/class-timeline-item-css.php b/inc/css/blocks/class-timeline-item-css.php
@@ -0,0 +1,90 @@
+<?php
+/**
+ * Css handling logic for blocks.
+ *
+ * @package ThemeIsle\GutenbergBlocks\CSS\Blocks
+ */
+
+namespace ThemeIsle\GutenbergBlocks\CSS\Blocks;
+
+use ThemeIsle\GutenbergBlocks\Base_CSS;
+
+use ThemeIsle\GutenbergBlocks\CSS\CSS_Utility;
+
+/**
+ * Class Timeline_Item_CSS
+ */
+class Timeline_Item_CSS extends Base_CSS {
+
+	/**
+	 * The namespace under which the blocks are registered.
+	 *
+	 * @var string
+	 */
+	public $block_prefix = 'timeline-item';
+
+	/**
+	 * Generate Timeline Item CSS
+	 *
+	 * @param mixed $block Block data.
+	 * @return string
+	 * @since   2.7.0
+	 * @access  public
+	 */
+	public function render_css( $block ) {
+		$css = new CSS_Utility( $block );
+
+		$css->add_item(
+			array(
+				'properties' => array(
+					array(
+						'property' => '--o-timeline-cnt-bg',
+						'value'    => 'containerBackgroundColor',
+					),
+					array(
+						'property' => '--o-timeline-cnt-br-c',
+						'value'    => 'containerBorderColor',
+					),
+					array(
+						'property' => '--o-timeline-i-color',
+						'value'    => 'iconColor',
+					),
+					array(
+						'property' => '--o-timeline-cnt-br-w',
+						'value'    => 'containerBorder',
+						'format'   => function( $value, $attrs ) {
+							return CSS_Utility::box_values(
+								$value,
+								array(
+									'left'   => '8px',
+									'right'  => '8px',
+									'top'    => '8px',
+									'bottom' => '8px',
+								)
+							);
+						},
+					),
+					array(
+						'property' => '--o-timeline-cnt-br-r',
+						'value'    => 'containerRadius',
+						'format'   => function( $value, $attrs ) {
+							return CSS_Utility::box_values(
+								$value,
+								array(
+									'left'   => '8px',
+									'right'  => '8px',
+									'top'    => '8px',
+									'bottom' => '8px',
+								)
+							);
+						},
+					),
+				),
+			)
+		);
+
+		$style = $css->generate();
+
+		return $style;
+	}
+}
diff --git a/src/blocks/blocks/index.js b/src/blocks/blocks/index.js
@@ -24,3 +24,4 @@ import './stripe-checkout/index.js';
 import './tabs/index.js';
 import './deprecated/index.js';
 import './content-generator/index.js';
+import './timeline/index.js';
diff --git a/src/blocks/blocks/timeline/editor.scss b/src/blocks/blocks/timeline/editor.scss
@@ -0,0 +1,6 @@
+@import 'style';
+
+.o-timeline-add-item {
+    display: flex;
+    margin: 0 auto;
+}
diff --git a/src/blocks/blocks/timeline/group/block.json b/src/blocks/blocks/timeline/group/block.json
@@ -0,0 +1,52 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "themeisle-blocks/timeline",
+    "allowedBlocks": [ "themeisle-blocks/timeline-item" ],
+	"title": "Timeline",
+	"category": "themeisle-blocks",
+	"description": "Organize your events in a timeline with the Timeline block. Powered by Otter.",
+	"keywords": [ "media", "timeline", "date" ],
+	"textdomain": "otter-blocks",
+	"attributes": {
+		"id": {
+			"type": "string"
+		},
+		"containerBorder": {
+			"type": "object"
+		},
+		"containerRadius": {
+			"type": ["string", "object"]
+		},
+		"containerPadding": {
+			"type": ["string", "object"]
+		},
+		"containerBackgroundColor": {
+			"type": "string"
+		},
+		"containerBorderColor": {
+			"type": "string"
+		},
+		"verticalLineColor": {
+			"type": "string"
+		},
+		"iconColor": {
+			"type": "string"
+		},
+		"iconSize": {
+			"type": "string"
+		},
+		"verticalLineWidth": {
+			"type": "string"
+		},
+		"containersAlignment": {
+			"type": "string",
+			"default": "alternative"
+		}
+	},
+	"supports": {
+		"align": [ "wide", "full" ]
+	},
+	"editorStyle": "otter-timeline-editor",
+	"style": "otter-timeline-style"
+}