From 95efe847b805dbc5846963057b86e7268fc6e820 Mon Sep 17 00:00:00 2001
From: Aadil Ayub <aadilayub@protonmail.com>
Date: Tue, 29 Aug 2023 15:37:47 +0500
Subject: [PATCH] turn "tab" style headings into block style

---
 block-styles.css   | 28 ++++++++++++++++++++++++++++
 functions.php      | 18 +++++++++++++++++-
 js/block-styles.js |  8 ++++++++
 style.css          | 27 ---------------------------
 4 files changed, 53 insertions(+), 28 deletions(-)
 create mode 100644 block-styles.css
 create mode 100644 js/block-styles.js

diff --git a/block-styles.css b/block-styles.css
new file mode 100644
index 0000000..7015fd6
--- /dev/null
+++ b/block-styles.css
@@ -0,0 +1,28 @@
+
+/* For the "Tabbed Heading" block style */
+.tabbed-heading {
+  display: flex;
+  height: 36px;
+  align-items: center;
+  border-top: 1px solid;
+}
+
+.tabbed-heading::before {
+  content: "";
+  border-bottom: 1px solid;
+  border-right: 1px solid;
+  width: 80px;
+  margin-right: 8px;
+  height: 36px;
+  border-top: 2px solid var(--wp--preset--color--background);
+}
+
+.tabbed-heading::after {
+  content: "";
+  border-bottom: 1px solid;
+  flex-grow: 1;
+  margin-left: 8px;
+  height: 36px;
+  border-left: 1px solid;
+  border-top: 2px solid var(--wp--preset--color--background);
+}
diff --git a/functions.php b/functions.php
index a0e564a..b934fd4 100644
--- a/functions.php
+++ b/functions.php
@@ -4,5 +4,21 @@ add_action('init', 'custom_stylesheet');
  
 function custom_stylesheet() {
     wp_register_style( 'custom-styles', get_template_directory_uri() . '/style.css' );
+    
+    /** 
+     * making sure css from block styles gets loaded on front-end
+     * TODO: unify both css files into one stylesheet
+    */
+    wp_register_style( 'block-styles', get_theme_file_uri( 'block-styles.css' ) );
 }
-wp_enqueue_style( 'custom-styles' );
\ No newline at end of file
+wp_enqueue_style( 'custom-styles' );
+
+function autonomic_block_styles() {
+    /**
+    * Enable support for block editor styles
+    * @link https://developer.wordpress.org/themes/basics/theme-functions/#theme-support-in-block-themes
+	*/
+	add_theme_support( 'editor-styles' );
+	add_theme_support( 'wp-block-styles' );
+	add_editor_style( 'block-styles.css' );
+}
\ No newline at end of file
diff --git a/js/block-styles.js b/js/block-styles.js
new file mode 100644
index 0000000..38ccbed
--- /dev/null
+++ b/js/block-styles.js
@@ -0,0 +1,8 @@
+wp.domReady( () => {
+  wp.blocks.registerBlockStyle(
+    'core/', {
+    name: 'tabbed-heading',
+    label: 'Tabbed Heading',
+  }
+  )
+} )
\ No newline at end of file
diff --git a/style.css b/style.css
index 755610a..1be0f8d 100644
--- a/style.css
+++ b/style.css
@@ -31,33 +31,6 @@ html, body {
   height: 100%;
 }
 
-.wp-site-blocks h2 {
-  display: flex;
-  height: 36px;
-  align-items: center;
-  border-top: 1px solid;
-}
-
-
-.wp-site-blocks h2::before {
-  content: "";
-  border-bottom: 1px solid;
-  border-right: 1px solid;
-  width: 80px;
-  margin-right: 8px;
-  height: 36px;
-  border-top: 2px solid var(--wp--preset--color--background);
-}
-
-.wp-site-blocks h2::after {
-  content: "";
-  border-bottom: 1px solid;
-  flex-grow: 1;
-  margin-left: 8px;
-  height: 36px;
-  border-left: 1px solid;
-  border-top: 2px solid var(--wp--preset--color--background);
-}
 
 .wp-site-blocks h2.blog-post-heading {
   border-top: none;