create markdown heading block style

block-styles.css

@@ -26,3 +26,26 @@
   border-left: 1px solid;
   border-top: 2px solid var(--wp--preset--color--background);
 }
+
+/* For the "Markdown-style Heading" block style */
+.is-style-markdown-heading::before {
+  content: "##";
+  width: 4ch;
+  margin-right: 0;
+  font-family: monospace;
+  margin-inline-end: .3em;
+  letter-spacing: 2px;
+}
+
+@media screen and (max-width: 782px) {
+  .is-style-markdown-heading::before {
+    margin-inline-start: 1em;
+  }
+}
+
+@media screen and (min-width: 782px) {
+  .is-style-markdown-heading {
+    margin-top: 4em;
+    font-size: var(--wp--preset--font-size--medium);
+  }
+}

js/block-styles.js

@@ -12,4 +12,18 @@ wp.domReady( () => {
       label: 'Tabbed Heading',
     }
   )
+
+  wp.blocks.registerBlockStyle(
+    'core/heading', {
+      name: 'markdown-heading',
+      label: 'Markdown-style Heading',
+    }
+  )
+
+  wp.blocks.registerBlockStyle(
+    'core/post-title', {
+      name: 'markdown-heading',
+      label: 'Markdown-style Heading',
+    }
+  )
 } )

style.css

@@ -25,48 +25,18 @@ html, body {
   height: 100%;
 }
 
-.wp-site-blocks{
+.wp-site-blocks {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
-
-.wp-site-blocks h2.blog-post-heading {
-  border-top: none;
-  height: revert;
-  container-type: inline-size;
-}
-
 @container (max-width: 20ch) {
   .wp-site-blocks h2::before {
     width: 7ch;
   }
 } 
 
-.wp-site-blocks h2.blog-post-heading::before {
-  content: "##";
-  border-bottom: none;
-  border-right: none;
-  width: 4ch;
-  margin-right: 0;
-  height: revert;
-  border-top: none;
-  font-family: monospace;
-  margin-inline-end: .3em;
-  letter-spacing: 2px;
-}
-
-.wp-site-blocks h2.blog-post-heading::after {
-  content: none;
-  border-bottom: none;
-  flex-grow: 1;
-  margin-left: 0;
-  height: revert;
-  border-left: none;
-  border-top: none;
-}
-
 .home .wp-site-blocks ul {
   list-style-image: url('https://beta.autonomic.zone/wp-content/uploads/2023/01/arrow.png');
 }
@@ -159,10 +129,6 @@ html, body {
     line-height: 1.5 !important;
     margin-top: 40px !important;
   }
-
-  .wp-site-blocks h2.blog-post-heading::before {
-    margin-inline-start: 1em;
-  }
 }
 
 @media screen and (min-width: 600px){
@@ -224,9 +190,4 @@ html, body {
   .wp-site-blocks .category-portfolio h2 {
     margin-block: 40px !important;
   }
-
-  .wp-site-blocks h2.blog-post-heading {
-    margin-top: 4em;
-    font-size: var(--wp--preset--font-size--medium);
-  }
 }