Merge pull request #351 from thec4aa/fix-separators

fix: separators
thec4aa · Jul 25, 2024 · 090e9b0 · 090e9b0
2 parents 4cd5fb5 + 9f64998
commit 090e9b0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 37 deletions.
diff --git a/js/editor.js b/js/editor.js
@@ -2,6 +2,7 @@ wp.domReady( () => {
 
 	wp.blocks.unregisterBlockStyle('core/button', 'outline');
 	wp.blocks.unregisterBlockStyle('core/button', 'fill');
+	wp.blocks.unregisterBlockStyle('core/separator', 'wide');
 
 	wp.blocks.registerBlockStyle('core/button', {
 		name: 'high-emphasis-button',

diff --git a/src/css/_02-elements.scss b/src/css/_02-elements.scss
@@ -901,11 +901,11 @@ fieldset {
         text-align: center !important;
     }
 }
-/**
-* 
-* SEPARATOR BLOCK
-*
-*/
+/*
+ * 
+ * SEPARATOR BLOCK
+ *
+ */
 
 .entry .entry-content .wp-block-separator,
 .entry .entry-content hr,
@@ -928,16 +928,22 @@ fieldset {
 }
 
 // makes "Default" gutenberg selected separator centered and width 90%
-.wp-block-separator:not(.is-style-wide):not(.is-style-dots).is-style-default,
-.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+.entry .entry-content hr,
+.entry .entry-content .wp-block-separator,
+.entry .entry-content .wp-block-separator:not(.is-style-wide):not(.is-style-dots) hr { // including for legacy
+    width: 90%;
+    max-width: calc( var( --wp--style--global--content-size ) * .9 );
+}
+
+.entry .entry-content .wp-block-separator.alignwide {
     width: 90%;
-    max-width: 90%;
+    max-width: calc( var( --wp--style--global--wide-size ) * .9 );
 }
 
-.wp-block-separator.alignwide:not(.is-style-wide):not(.is-style-dots).is-style-default,
-.wp-block-separator.alignwide:not(.is-style-wide):not(.is-style-dots) {
+.entry .entry-content .wp-block-separator.aligncenter {
     width: 90%;
-    max-width: 90%;
+    max-width: calc( var( --wp--style--global--content-size ) * .9 );
+    margin: auto;
 }
 
 

diff --git a/src/css/_c4aa-editorStyles.css b/src/css/_c4aa-editorStyles.css
@@ -239,33 +239,16 @@ ul li{
 	 letter-spacing: 1.5rem;
 	 padding-left: 1.5rem;
  }
-
- /* Override media queries from theme */
- /* makes "Wide Line" gutenberg selected separator full width */
- .editor-styles-wrapper .wp-block-separator.alignfull.is-style-wide {
-	 width: 100vw;
-	 position: relative;
-	 right: calc(50vw - 50%);
-	 max-width: unset;
- }
-
- /* makes "Default" gutenberg selected separator centered and width 90% */
 
- .wp-block-separator:not(.is-style-wide):not(.is-style-dots).is-style-default,
- .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
-	 width: calc(.9 * var(--wp--style--global--content-size));
-	 max-width: var(--wp--style--global--content-size);
+ .editor-styles-wrapper .wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
+	width: 90%;
  }
-
- .wp-block-separator.alignwide:not(.is-style-wide):not(.is-style-dots).is-style-default,
- .wp-block-separator.alignwide:not(.is-style-wide):not(.is-style-dots) {
-		 width: calc(.9 * var(--wp--style--global--wide-size));
-		 max-width: var(--wp--style--global--wide-size);
-	 }
 
+/*
+ * BUTTONS 
+ */
 
-/* Buttons */
-.editor-styles-wrapper .button,
+ .editor-styles-wrapper .button,
 .editor-styles-wrapper .wp-element-button,
 .editor-styles-wrapper .entry .entry-content .wp-block-file .wp-block-file__button,
 .editor-styles-wrapper .entry .entry-content .wp-block-button .wp-block-button__link,
@@ -291,8 +274,8 @@ ul li{
 	}
 
 /* 
-LINKS 
-*/
+ * LINKS 
+ */
 
 a:link, a {
 	color: var( --color-brandRed );
@@ -330,7 +313,9 @@ a:hover {
 	font-weight: inherit;
 }
 
-/* Details Block */
+/* 
+ * DETAILS BLOCK 
+ */
 
 details.wp-block-details { 
     border-bottom: solid 2px var(--color-brandRed);