Issue #11 - Add debug divs and styling to templates

bobbingwide · Apr 28, 2021 · c995c4d · c995c4d
1 parent 1f8556a
commit c995c4d
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 1 deletion.
diff --git a/block-templates/attachment.html b/block-templates/attachment.html
@@ -0,0 +1,8 @@
+<!-- wp:html -->
+<div class="WP_DEBUG">attachment.html</div>
+<!-- /wp:html -->
+<!-- wp:post-featured-image /-->
+
+<!-- wp:post-content /-->
+
+<!-- wp:template-part {"slug":"footer","theme":"thisis","style":{"color":{"background":"#f7f7f7"}},"textColor":"foreground","layout":{"inherit":true}} /-->
diff --git a/block-templates/index.html b/block-templates/index.html
@@ -0,0 +1,3 @@
+<!-- wp:html -->
+<div class="WP_DEBUG">index.html</div>
+<!-- /wp:html -->
diff --git a/style.css b/style.css
@@ -37,4 +37,51 @@ Override margin bottom added by Gutenberg inline styling
 
 li.current-menu-item  {
     color: var( --wp--preset--color--current-menu ) !important;
-}
+}
+
+/*
+Styling for blocks with class="WP_DEBUG"
+ */
+div.WP_DEBUG { height: 1px;
+    border-top: 1px dotted red;
+    width: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+div.WP_DEBUG:hover {
+    height: auto;
+    overflow: auto;
+    position: relative;
+}
+
+div.WP_DEBUG.END {
+    border-bottom: 1px solid green;
+}
+
+div.wp-site-blocks > div.WP_DEBUG:first-of-type {
+    background-color: white;
+    position: absolute;
+    top: 0;
+    z-index: 100000;
+    color: white;
+    height: auto;
+    overflow: auto;
+    width: auto;
+    border-top: 1px solid green;
+    background: transparent;
+    left: 40%;
+    padding: 0 1em;
+}
+
+div.wp-site-blocks > div.WP_DEBUG:first-of-type:hover {
+// margin-top: -1.1em;
+    position: absolute;
+    z-index: 100000;
+    padding: 0 1em;
+    height: auto;
+    top: 0px;
+    left: 40%;
+    color: black;
+
+}