From 9f64998d2b94e3ea064ada4bc1d9f8cf84d72227 Mon Sep 17 00:00:00 2001
From: Steve Lambert <67271+slambert@users.noreply.github.com>
Date: Thu, 25 Jul 2024 15:31:35 -0400
Subject: [PATCH] fix: separators

removing wide option. It's all wide now.
basing width off wp-style-[   ]-content-size
updated editor styles
---
 js/editor.js                   |  1 +
 src/css/_02-elements.scss      | 28 +++++++++++++++----------
 src/css/_c4aa-editorStyles.css | 37 ++++++++++------------------------
 3 files changed, 29 insertions(+), 37 deletions(-)

diff --git a/js/editor.js b/js/editor.js
index 95b3aae..339df2b 100644
--- 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
index b3b5acc..41042b2 100644
--- 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
index a926143..4bd9e9f 100644
--- 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);