From bda3f2bbd0bd5f0737a541c1cc2c148338d86164 Mon Sep 17 00:00:00 2001 From: Brandon Date: Tue, 8 Nov 2022 01:43:25 -0600 Subject: [PATCH] fix(editor): Fix heading tag indicators (#1) chore(editor): Nest editor styles inside of `.editor-wrapper-styles` chore(deps): Set `purge` to `false` in tailwind config --- public/css/blocks.css | 2 +- public/css/editor.css | 2 +- resources/css/blocks.scss | 6 ++++-- resources/css/blocks/core-heading.scss | 6 +++--- resources/css/editor.scss | 4 +++- tailwind.config.js | 8 +------- 6 files changed, 13 insertions(+), 15 deletions(-) diff --git a/public/css/blocks.css b/public/css/blocks.css index ddb18b2..0790478 100644 --- a/public/css/blocks.css +++ b/public/css/blocks.css @@ -1 +1 @@ -@charset "UTF-8";ol.is-style-arrow-r,ol.is-style-caret-r,ol.is-style-check,ol.is-style-chevron-r,ol.is-style-times,ul.is-style-arrow-r,ul.is-style-caret-r,ul.is-style-check,ul.is-style-chevron-r,ul.is-style-times{position:relative!important;list-style-type:none!important;padding-left:0!important;margin-left:auto!important}ol.is-style-arrow-r ul,ol.is-style-caret-r ul,ol.is-style-check ul,ol.is-style-chevron-r ul,ol.is-style-times ul,ul.is-style-arrow-r ul,ul.is-style-caret-r ul,ul.is-style-check ul,ul.is-style-chevron-r ul,ul.is-style-times ul{list-style-type:none!important}ol.is-style-arrow-r li,ol.is-style-caret-r li,ol.is-style-check li,ol.is-style-chevron-r li,ol.is-style-times li,ul.is-style-arrow-r li,ul.is-style-caret-r li,ul.is-style-check li,ul.is-style-chevron-r li,ul.is-style-times li{padding-left:1.5rem;position:relative}ol.is-style-arrow-r li:before,ol.is-style-caret-r li:before,ol.is-style-check li:before,ol.is-style-chevron-r li:before,ol.is-style-times li:before,ul.is-style-arrow-r li:before,ul.is-style-caret-r li:before,ul.is-style-check li:before,ul.is-style-chevron-r li:before,ul.is-style-times li:before{position:absolute;left:0;font-family:Font Awesome\ 5 Pro,Font Awesome\ 5 Free;fill:currentColor;font-weight:900;color:var(--wp--preset--color--brand-500)}ol.is-style-numeric,ul.is-style-numeric{position:relative!important;list-style-type:none!important;padding-left:0!important;margin-left:auto!important;counter-reset:li}ol.is-style-numeric li,ul.is-style-numeric li{padding-left:1.5rem;position:relative;counter-increment:li}ol.is-style-numeric li:before,ul.is-style-numeric li:before{left:0;font-weight:700;position:absolute;color:var(--wp--preset--color--brand-500);content:counter(li) "."}ol.is-style-numeric li ol,ul.is-style-numeric li ol{padding-left:0}ol.is-style-numeric li ol li:before,ul.is-style-numeric li ol li:before{display:none}ol.is-style-caret-r li:before,ul.is-style-caret-r li:before{content:"\F0DA"}ol.is-style-chevron-r li:before,ul.is-style-chevron-r li:before{content:"\F054"}ol.is-style-arrow-r li:before,ul.is-style-arrow-r li:before{content:"\F356"}ol.is-style-check li:before,ul.is-style-check li:before{--text-opacity:1;color:#68d391;color:rgba(104,211,145,var(--text-opacity));content:"\F00C"}ol.is-style-times li:before,ul.is-style-times li:before{--text-opacity:1;color:#f56565;color:rgba(245,101,101,var(--text-opacity));content:"\F00D"}.alignnone{display:block;margin-left:0;margin-right:0;max-width:100%;height:auto}.aligncenter{display:block;margin-left:auto;margin-right:auto;text-align:center}.alignleft,.alignleft .wp-caption{float:left;margin-right:1.5rem}.alignright,.alignright .wp-caption{float:right;margin-left:1.5rem;text-align:right}.wp-caption{max-width:100%;text-align:center}.wp-caption-text{font-size:1rem;line-height:1.5rem;margin-left:1.5rem;margin-right:1.5rem;margin-top:.75rem} \ No newline at end of file +@charset "UTF-8";.editor-styles-wrapper ol.is-style-arrow-r,.editor-styles-wrapper ol.is-style-caret-r,.editor-styles-wrapper ol.is-style-check,.editor-styles-wrapper ol.is-style-chevron-r,.editor-styles-wrapper ol.is-style-times,.editor-styles-wrapper ul.is-style-arrow-r,.editor-styles-wrapper ul.is-style-caret-r,.editor-styles-wrapper ul.is-style-check,.editor-styles-wrapper ul.is-style-chevron-r,.editor-styles-wrapper ul.is-style-times{position:relative!important;list-style-type:none!important;padding-left:0!important;margin-left:auto!important}.editor-styles-wrapper ol.is-style-arrow-r ul,.editor-styles-wrapper ol.is-style-caret-r ul,.editor-styles-wrapper ol.is-style-check ul,.editor-styles-wrapper ol.is-style-chevron-r ul,.editor-styles-wrapper ol.is-style-times ul,.editor-styles-wrapper ul.is-style-arrow-r ul,.editor-styles-wrapper ul.is-style-caret-r ul,.editor-styles-wrapper ul.is-style-check ul,.editor-styles-wrapper ul.is-style-chevron-r ul,.editor-styles-wrapper ul.is-style-times ul{list-style-type:none!important}.editor-styles-wrapper ol.is-style-arrow-r li,.editor-styles-wrapper ol.is-style-caret-r li,.editor-styles-wrapper ol.is-style-check li,.editor-styles-wrapper ol.is-style-chevron-r li,.editor-styles-wrapper ol.is-style-times li,.editor-styles-wrapper ul.is-style-arrow-r li,.editor-styles-wrapper ul.is-style-caret-r li,.editor-styles-wrapper ul.is-style-check li,.editor-styles-wrapper ul.is-style-chevron-r li,.editor-styles-wrapper ul.is-style-times li{padding-left:1.5rem;position:relative}.editor-styles-wrapper ol.is-style-arrow-r li:before,.editor-styles-wrapper ol.is-style-caret-r li:before,.editor-styles-wrapper ol.is-style-check li:before,.editor-styles-wrapper ol.is-style-chevron-r li:before,.editor-styles-wrapper ol.is-style-times li:before,.editor-styles-wrapper ul.is-style-arrow-r li:before,.editor-styles-wrapper ul.is-style-caret-r li:before,.editor-styles-wrapper ul.is-style-check li:before,.editor-styles-wrapper ul.is-style-chevron-r li:before,.editor-styles-wrapper ul.is-style-times li:before{position:absolute;left:0;font-family:Font Awesome\ 5 Pro,Font Awesome\ 5 Free;fill:currentColor;font-weight:900;color:var(--wp--preset--color--brand-500)}.editor-styles-wrapper ol.is-style-numeric,.editor-styles-wrapper ul.is-style-numeric{position:relative!important;list-style-type:none!important;padding-left:0!important;margin-left:auto!important;counter-reset:li}.editor-styles-wrapper ol.is-style-numeric li,.editor-styles-wrapper ul.is-style-numeric li{padding-left:1.5rem;position:relative;counter-increment:li}.editor-styles-wrapper ol.is-style-numeric li:before,.editor-styles-wrapper ul.is-style-numeric li:before{left:0;font-weight:700;position:absolute;color:var(--wp--preset--color--brand-500);content:counter(li) "."}.editor-styles-wrapper ol.is-style-numeric li ol,.editor-styles-wrapper ul.is-style-numeric li ol{padding-left:0}.editor-styles-wrapper ol.is-style-numeric li ol li:before,.editor-styles-wrapper ul.is-style-numeric li ol li:before{display:none}.editor-styles-wrapper ol.is-style-caret-r li:before,.editor-styles-wrapper ul.is-style-caret-r li:before{content:"\F0DA"}.editor-styles-wrapper ol.is-style-chevron-r li:before,.editor-styles-wrapper ul.is-style-chevron-r li:before{content:"\F054"}.editor-styles-wrapper ol.is-style-arrow-r li:before,.editor-styles-wrapper ul.is-style-arrow-r li:before{content:"\F356"}.editor-styles-wrapper ol.is-style-check li:before,.editor-styles-wrapper ul.is-style-check li:before{--text-opacity:1;color:#68d391;color:rgba(104,211,145,var(--text-opacity));content:"\F00C"}.editor-styles-wrapper ol.is-style-times li:before,.editor-styles-wrapper ul.is-style-times li:before{--text-opacity:1;color:#f56565;color:rgba(245,101,101,var(--text-opacity));content:"\F00D"}.editor-styles-wrapper .alignnone{display:block;margin-left:0;margin-right:0;max-width:100%;height:auto}.editor-styles-wrapper .aligncenter{display:block;margin-left:auto;margin-right:auto;text-align:center}.editor-styles-wrapper .alignleft,.editor-styles-wrapper .alignleft .wp-caption{float:left;margin-right:1.5rem}.editor-styles-wrapper .alignright,.editor-styles-wrapper .alignright .wp-caption{float:right;margin-left:1.5rem;text-align:right}.editor-styles-wrapper .wp-caption{max-width:100%;text-align:center}.editor-styles-wrapper .wp-caption-text{font-size:1rem;margin-left:1.5rem;margin-right:1.5rem;margin-top:.75rem} \ No newline at end of file diff --git a/public/css/editor.css b/public/css/editor.css index 83bee32..5a103c3 100644 --- a/public/css/editor.css +++ b/public/css/editor.css @@ -1 +1 @@ -.wp-block[data-type="core/heading"]{position:relative}.wp-block[data-type="core/heading"]:not(.is-selected):after{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;position:absolute;margin-top:.5rem;margin-left:-2rem;font-weight:500;font-size:.75rem;line-height:1rem;opacity:.5;letter-spacing:-.025em;text-transform:uppercase;content:""}h1.wp-block[data-type="core/heading"]:not(.is-selected):after{content:"h1"}h2.wp-block[data-type="core/heading"]:not(.is-selected):after{content:"h2"}h3.wp-block[data-type="core/heading"]:not(.is-selected):after{content:"h3"}h4.wp-block[data-type="core/heading"]:not(.is-selected):after{content:"h4"}h5.wp-block[data-type="core/heading"]:not(.is-selected):after{content:"h5"}h6.wp-block[data-type="core/heading"]:not(.is-selected):after{content:"h6"}table.wpil-outbound-links{position:relative!important} \ No newline at end of file +.editor-styles-wrapper .wp-block[data-type="core/heading"]{position:relative}.editor-styles-wrapper .wp-block[data-type="core/heading"]:not(.is-selected):before{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;position:absolute;margin-top:.75rem;margin-left:-2rem;font-weight:500;font-size:.75rem;opacity:.5;letter-spacing:-.025em;text-transform:uppercase;content:""}.editor-styles-wrapper h1.wp-block[data-type="core/heading"]:not(.is-selected):before{content:"h1"}.editor-styles-wrapper h2.wp-block[data-type="core/heading"]:not(.is-selected):before{content:"h2"}.editor-styles-wrapper h3.wp-block[data-type="core/heading"]:not(.is-selected):before{content:"h3"}.editor-styles-wrapper h4.wp-block[data-type="core/heading"]:not(.is-selected):before{content:"h4"}.editor-styles-wrapper h5.wp-block[data-type="core/heading"]:not(.is-selected):before{content:"h5"}.editor-styles-wrapper h6.wp-block[data-type="core/heading"]:not(.is-selected):before{content:"h6"}table.wpil-outbound-links{position:relative!important} \ No newline at end of file diff --git a/resources/css/blocks.scss b/resources/css/blocks.scss index 79eb704..54ddae9 100644 --- a/resources/css/blocks.scss +++ b/resources/css/blocks.scss @@ -1,2 +1,4 @@ -@import './blocks/core-list'; -@import './blocks/core-classic'; +.editor-styles-wrapper { + @import './blocks/core-list'; + @import './blocks/core-classic'; +} diff --git a/resources/css/blocks/core-heading.scss b/resources/css/blocks/core-heading.scss index 7d5df3a..ad99c56 100644 --- a/resources/css/blocks/core-heading.scss +++ b/resources/css/blocks/core-heading.scss @@ -1,15 +1,15 @@ .wp-block[data-type='core/heading'] { @apply relative; - &:not(.is-selected)::after { - @apply font-sans absolute mt-2 -ml-8 font-medium text-xs opacity-50 tracking-tight uppercase; + &:not(.is-selected)::before { + @apply font-sans absolute mt-3 -ml-8 font-medium text-xs opacity-50 tracking-tight uppercase; content: ''; } } @each $heading in ('h1', 'h2', 'h3', 'h4', 'h5', 'h6') { - #{$heading}.wp-block[data-type='core/heading']:not(.is-selected)::after { + #{$heading}.wp-block[data-type='core/heading']:not(.is-selected)::before { content: '#{$heading}'; } } diff --git a/resources/css/editor.scss b/resources/css/editor.scss index 117d853..1c08a27 100644 --- a/resources/css/editor.scss +++ b/resources/css/editor.scss @@ -1,4 +1,6 @@ -@import './blocks/core-heading'; +.editor-styles-wrapper { + @import './blocks/core-heading'; +} table.wpil-outbound-links { @apply relative #{!important}; diff --git a/tailwind.config.js b/tailwind.config.js index 627dd84..5af846d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,5 @@ module.exports = { - future: { - removeDeprecatedGapUtilities: true, - purgeLayersByDefault: true, - defaultLineHeights: true, - standardFontWeights: true, - }, - purge: [], + purge: false, theme: { extend: { fontFamily: {