malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add no-theme-style utility class

Browse Source
This commit is contained in:
Tetrakern 2024-08-03 17:39:22 +02:00
parent a739499185
commit b188031810
6 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
DOCUMENTATION.md
View File

@ -527,6 +527,7 @@ You can also apply additional classes to single words or phrases. Switch to the
| `hide-if-logged-in` | Hides element if the user is logged in.
| `hide-if-logged-out` | Hides element if the user is logged out.
| `no-theme-spacing` | Removes the top and bottom spacing applied by the theme.
| `no-theme-style` | Removes the styling applied by the theme (for some blocks).
| `padding-[top\|right\|bottom\|left]` | Applies directional theme page padding.
| `bg-[50\|100\|200\|...\|800\|900\|950]` | Forces the respective theme background color.
| `fg-[100\|200\|...\|800\|900\|950]` | Forces the respective theme text color.

2
css/application.css
View File

File diff suppressed because one or more lines are too long

2
css/complete.css
View File

File diff suppressed because one or more lines are too long

2
css/editor.css
View File

File diff suppressed because one or more lines are too long

34
src/scss/common/_blocks.scss
View File

@ -41,7 +41,7 @@ sup[data-fn] {
// SEPARATOR
// =============================================================================
.wp-block-separator {
.wp-block-separator:where(:not(.no-theme-style)) {
border: 0;
border-bottom: var(--layout-hr-border);
@ -79,7 +79,7 @@ sup[data-fn] {
// IMAGES
// =============================================================================
.wp-block-image {
.wp-block-image:where(:not(.no-theme-style)) {
&.alignright {
float: right;
margin: .5em 0 .5em 1.5em;
@ -104,7 +104,7 @@ sup[data-fn] {
}
}
.wp-block-gallery {
.wp-block-gallery:where(:not(.no-theme-style)) {
&.has-background {
padding: max(var(--wp--style--unstable-gallery-gap, 1rem), 0.5rem);
}
@ -159,7 +159,7 @@ p.has-drop-cap::first-letter {
// CODE BLOCK
// =============================================================================
.wp-block-code {
.wp-block-code:where(:not(.no-theme-style)) {
clear: both;
letter-spacing: 0;
border-style: solid;
@ -202,7 +202,7 @@ p.has-drop-cap::first-letter {
// TABLES
// =============================================================================
.wp-block-table {
.wp-block-table:where(:not(.no-theme-style)) {
clear: both;
float: none;
overflow-x: auto;
@ -284,7 +284,7 @@ p.has-drop-cap::first-letter {
// BLOCKQUOTE
// =============================================================================
.wp-block-quote,
.wp-block-quote:where(:not(.no-theme-style)),
.comment-section blockquote {
color: var(--fg-500);
font-size: 87.5%; // Scales with custom formatting
@ -307,7 +307,7 @@ p.has-drop-cap::first-letter {
}
}
.wp-block-quote {
.wp-block-quote:where(:not(.no-theme-style)) {
--paragraph-spacing-offset: .75rem;
position: relative;
font-style: italic;
@ -389,7 +389,7 @@ p.has-drop-cap::first-letter {
// PULLQUOTE
// =============================================================================
figure.wp-block-pullquote {
figure.wp-block-pullquote:where(:not(.no-theme-style)) {
--paragraph-spacing-offset: .5rem;
clear: both;
color: var(--fg-600);
@ -537,7 +537,7 @@ figure.wp-block-pullquote {
// PRE BLOCK
// =============================================================================
.wp-block-preformatted {
.wp-block-preformatted:where(:not(.no-theme-style)) {
font-family: var(--ff-mono);
line-height: 1.7;
white-space: pre;
@ -553,7 +553,7 @@ figure.wp-block-pullquote {
// BUTTON(S) BLOCK
// =============================================================================
.wp-block-button {
.wp-block-button:where(:not(.no-theme-style)) {
border-style: solid;
// Theme button style applied
@ -594,7 +594,7 @@ figure.wp-block-pullquote {
}
}
.wp-block-buttons > .wp-block-button {
.wp-block-buttons:where(:not(.no-theme-style)) > .wp-block-button {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
@ -603,7 +603,7 @@ figure.wp-block-pullquote {
// FILE DOWNLOADS
// =============================================================================
.wp-block-file {
.wp-block-file:where(:not(.no-theme-style)) {
--focus-offset: 2px;
display: flex;
gap: 0 1px;
@ -670,7 +670,7 @@ figure.wp-block-pullquote {
// VIDEO
// =============================================================================
.wp-block-video {
.wp-block-video:where(:not(.no-theme-style)) {
display: flex;
align-items: center;
justify-content: center;
@ -691,7 +691,7 @@ figure.wp-block-pullquote {
// AUDIO
// =============================================================================
.wp-block-audio {
.wp-block-audio:where(:not(.no-theme-style)) {
display: flex;
align-items: center;
@ -707,7 +707,7 @@ figure.wp-block-pullquote {
// FOOTNOTES
// =============================================================================
.wp-block-footnotes {
.wp-block-footnotes:where(:not(.no-theme-style)) {
border-style: solid;
li:not(:last-child) {
@ -729,7 +729,7 @@ figure.wp-block-pullquote {
// CALENDAR
// =============================================================================
.wp-block-calendar {
.wp-block-calendar:not(.no-theme-style) {
container-type: inline-size;
:is(.wp-calendar-table, .wp-calendar-nav) {
@ -781,7 +781,7 @@ figure.wp-block-pullquote {
// CATEGORIES
// =============================================================================
.wp-block-categories {
.wp-block-categories:not(.no-theme-style) {
list-style-type: disc;
padding-left: 1.05em;
}

16
src/scss/editor.scss
View File

@ -169,7 +169,7 @@ body {
// SEPARATORS
// =============================================================================
.wp-block-separator {
.wp-block-separator:where(:not(.no-theme-style)) {
margin: 48px auto;
border: 0;
border-bottom: var(--layout-hr-border);
@ -212,7 +212,7 @@ body {
// BUTTONS
// =============================================================================
.wp-block-button {
.wp-block-button:where(:not(.no-theme-style)) {
padding-left: 0 !important;
padding-right: 0 !important;
@ -270,7 +270,7 @@ body {
// IMAGES
// =============================================================================
.wp-block-image {
.wp-block-image:where(:not(.no-theme-style)) {
&.alignright {
float: right;
margin: .5em calc((100% - min(100%, var(--editor-max-width))) / 2) .5em 1.5em;
@ -286,7 +286,7 @@ body {
}
}
.wp-block-gallery {
.wp-block-gallery:where(:not(.no-theme-style)) {
&.has-background {
padding: max(var(--wp--style--unstable-gallery-gap, 1em), 8px);
}
@ -296,7 +296,7 @@ body {
// CODE BLOCK
// =============================================================================
.wp-block-code {
.wp-block-code:where(:not(.no-theme-style)) {
clear: both;
padding: 1rem;
border-radius: var(--layout-border-radius-small);
@ -329,7 +329,7 @@ body {
// BLOCKQUOTE
// =============================================================================
.wp-block-quote {
.wp-block-quote:where(:not(.no-theme-style)) {
--spacing-offset: 12px;
font-size: 87.5%;
position: relative;
@ -397,7 +397,7 @@ body {
// PULLQUOTE
// =============================================================================
figure.wp-block-pullquote {
figure.wp-block-pullquote:where(:not(.no-theme-style)) {
--spacing-offset: 8px;
clear: both;
font-size: 1.25em;
@ -569,7 +569,7 @@ body {
// PREFORMATTED BLOCK
// =============================================================================
.wp-block-preformatted {
.wp-block-preformatted:where(:not(.no-theme-style)) {
font-family: var(--ff-mono);
line-height: 1.7;
white-space: pre-wrap;