Eoxia#16 [Blocks] add: Accordion block style and JS

blocks/build/accordion/block.json

@@ -14,24 +14,48 @@
       "default": "h2"
     },
     "title": {
-      "type": "string",
-      "default": "Accordion title"
+      "type": "string"
     },
     "subtitle": {
       "type": "string"
+    },
+    "isOpened": {
+      "type": "boolean",
+      "default": false
     }
   },
   "supports": {
     "color": {
       "background": "true",
       "color": "true"
     },
-    "html": false
+    "spacing": {
+      "margin": true,
+      "padding": false,
+      "blockGap": false
+    },
+    "shadow": true,
+    "html": false,
+    "__experimentalBorder": {
+      "color": true,
+      "radius": true,
+      "style": true,
+      "width": true,
+      "__experimentalDefaultControls": {
+        "color": true,
+        "radius": true,
+        "style": true,
+        "width": true
+      }
+    }
   },
   "textdomain": "accordion",
   "editorScript": "file:./index.js",
   "editorStyle": "file:./index.css",
-  "style": "file:./style-index.css",
+  "style": [
+    "file:./style-index.css",
+    "dashicons"
+  ],
   "render": "file:./render.php",
   "viewScript": "file:./view.js"
 }

blocks/build/accordion/index-rtl.css

@@ -6,3 +6,12 @@
  *
  * Replace them with your own styles or remove the file completely.
  */
+.wp-block-eo-accordion .eo-accordion__header:hover {
+  cursor: auto;
+}
+.wp-block-eo-accordion .eo-accordion__header:hover .eo-accordion__title {
+  opacity: 1;
+}
+.wp-block-eo-accordion .eo-accordion__header:hover .eo-accordion__header-toggle::before {
+  opacity: 0.4 !important;
+}

blocks/build/accordion/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => 'a6e0a83b5882964f3777');
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n', 'wp-primitives'), 'version' => 'dfd431d76258f50b9b4d');

blocks/build/accordion/render.php

@@ -13,27 +13,27 @@
 $titleTag = ! empty( $attributes['titleTag'] ) ? $attributes['titleTag'] : 'h2';
 $title    = ! empty( $attributes['title'] ) ? $attributes['title'] : '';
 $subtitle = ! empty( $attributes['subtitle'] ) ? $attributes['subtitle'] : '';
+$is_active = ! empty( $attributes['isOpened'] ) ? 'eo-accordion__active' : '';
 ?>
 
 <div <?php echo wp_kses_data( get_block_wrapper_attributes() ); ?>>
-	<div class="eo-accordion__header">
-		<div class="eo-accordion__header-container">
-			<?php echo sprintf("<%s class='eo-accordion__title'>%s</%s>",
-				esc_attr( $titleTag ),
-				esc_html( $title ),
-				esc_attr( $titleTag )
-			); ?>
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="eo-accordion__header-toggle">
-				<path
-					d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/>
-			</svg>
+	<div class="eo-accordion__main-container <?php echo esc_attr( $is_active ); ?>">
+		<div class="eo-accordion__header">
+			<div class="eo-accordion__header-container">
+				<?php echo sprintf("<%s class='eo-accordion__title'>%s</%s>",
+					esc_attr( $titleTag ),
+					$title,
+					esc_attr( $titleTag )
+				); ?>
+				<span class="eo-accordion__header-toggle dashicons dashicons-plus-alt2"></span>
+			</div>
+			<?php if ( ! empty( $subtitle ) ) : ?>
+				<div class="eo-accordion__subtitle"><?php echo esc_html( $subtitle ); ?></div>
+			<?php endif; ?>
 		</div>
-		<?php if ( ! empty( $subtitle ) ) : ?>
-			<div class="eo-accordion__subtitle"><?php echo esc_html( $subtitle ); ?></div>
-		<?php endif; ?>
-	</div>
 
-	<div class="eo-accordion__content">
-		<?php echo $content; ?>
+		<div class="eo-accordion__inner">
+			<?php echo wp_kses_post( $content ); ?>
+		</div>
 	</div>
 </div>

blocks/build/accordion/style-index-rtl.css

@@ -7,7 +7,61 @@
  *
  * Replace them with your own styles or remove the file completely.
  */
-.wp-block-eo-accordion .eo-accordion__header-toggle {
-  width: 12px;
-  fill: rgba(0, 0, 0, 0.4);
+.wp-block-eo-accordion {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+}
+.wp-block-eo-accordion.has-background {
+  padding: 0 1em;
+}
+.wp-block-eo-accordion.has-background .eo-accordion__main-container {
+  border-bottom: 0;
+}
+.wp-block-eo-accordion .eo-accordion__header {
+  padding: 0.8em 0;
+}
+.wp-block-eo-accordion .eo-accordion__header:hover {
+  cursor: pointer;
+}
+.wp-block-eo-accordion .eo-accordion__header:hover .eo-accordion__title {
+  opacity: 0.7;
+}
+.wp-block-eo-accordion .eo-accordion__header:hover .eo-accordion__header-toggle::before {
+  opacity: 1 !important;
+}
+.wp-block-eo-accordion .eo-accordion__header .eo-accordion__header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.wp-block-eo-accordion .eo-accordion__header .eo-accordion__header-container .eo-accordion__title {
+  margin: 0;
+  transition: opacity 0.2s ease-out;
+}
+.wp-block-eo-accordion .eo-accordion__header .eo-accordion__header-container span.eo-accordion__title {
+  font-size: 18px;
+  font-weight: 700;
+}
+.wp-block-eo-accordion .eo-accordion__header .eo-accordion__header-container .eo-accordion__header-toggle {
+  transition: transform 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
+}
+.wp-block-eo-accordion .eo-accordion__header .eo-accordion__header-container .eo-accordion__header-toggle::before {
+  opacity: 0.4;
+  transition: all 0.2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
+  transform-origin: center;
+}
+.wp-block-eo-accordion .eo-accordion__inner {
+  padding: 0 0 1em 0;
+  transition: opacity 0.2s ease-out;
+}
+.wp-block-eo-accordion .eo-accordion__inner > *:first-child {
+  margin-top: 0;
+}
+.wp-block-eo-accordion .eo-accordion__inner > *:last-child {
+  margin-bottom: 0;
+}
+.wp-block-eo-accordion .eo-accordion__main-container.eo-accordion__active .eo-accordion__header-toggle {
+  transform: rotate(-45deg);
+}
+.wp-block-eo-accordion .eo-accordion__main-container:not(.eo-accordion__active) .eo-accordion__inner {
+  opacity: 0;
 }

blocks/build/accordion/view.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array(), 'version' => '7c1ab736da66785eedec');
+<?php return array('dependencies' => array(), 'version' => '470e222bd072b6a22737');