diff --git a/.dev/sass/compat/gutenberg.scss b/.dev/sass/compat/gutenberg.scss new file mode 100644 index 0000000..668848f --- /dev/null +++ b/.dev/sass/compat/gutenberg.scss @@ -0,0 +1,92 @@ +/*-------------------------------------------------------------- +>>> Gutenberg: +--------------------------------------------------------------*/ +.wp-block-cover-image { + margin-bottom: 1.5rem; +} + +[class^="wp-block-"].alignfull { + width: 100.5vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; + + @media #{$small-only} { + width: 100vw; + } + + img { + width: 100%; + } +} + +[class^="wp-block-"].alignwide { + margin-left: -1.5%; + margin-right: -1.5%; + width: 102%; + + @media #{$medium-only} { + margin-left: -1.25%; + margin-right: -1.25%; + width: 102.5% + } +} + +.wp-block-image, +.wp-block-gallery, +.wp-block-video, +.wp-block-quote, +.wp-block-text-columns, +.entry-content ul, +.entry-content ol, +.wp-block-cover-text { + &.alignleft { + margin: 0 1em 0.5em 0; + } + + &.alignright { + margin: 0 0 0.5em 1em; + } + + &.alignleft, + &.alignright { + max-width: 40%; + width: 100%; + + img { + width: inherit; + } + } +} + +.wp-block-gallery { + margin-left: 0; + margin-right: 0; + + &.is-cropped .blocks-gallery-item img { + height: auto; + } +} + +.wp-block-quote { + p { + margin-bottom: 0; + } +} + +.wp-block-pullquote { + margin-top: 1em; + margin-bottom: 1em; +} + +.wp-block-button.aligncenter { + margin-bottom: 1.5em; +} + +.wp-block-audio { + audio { + width: 100%; + } +} diff --git a/.dev/sass/style.scss b/.dev/sass/style.scss index 3b69cce..d714350 100644 --- a/.dev/sass/style.scss +++ b/.dev/sass/style.scss @@ -171,3 +171,4 @@ # Compat --------------------------------------------------------------*/ @import "compat/woocommerce"; +@import "compat/gutenberg"; diff --git a/readme.md b/readme.md index 99ae9c0..57ca5ad 100644 --- a/readme.md +++ b/readme.md @@ -95,6 +95,10 @@ TODO ## Changelog ## +### 1.1.3 ### + +* New: Introduce styles for Gutenberg. @props [evanherman](https://github.com/EvanHerman) + ### 1.1.2 ### * Tweak: Adjust site title wrapper width so long titles wrap properly. @props [evanherman](https://github.com/EvanHerman) diff --git a/readme.txt b/readme.txt index 8d46403..80bb3c6 100644 --- a/readme.txt +++ b/readme.txt @@ -93,6 +93,10 @@ TODO == Changelog == += 1.1.3 = + +* New: Introduce styles for Gutenberg. @props [evanherman](https://github.com/EvanHerman) + = 1.1.2 = * Tweak: Adjust site title wrapper width so long titles wrap properly. @props [evanherman](https://github.com/EvanHerman) diff --git a/style-rtl.css b/style-rtl.css index 905d5dd..b22df54 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -2650,3 +2650,105 @@ body.woocommerce-cart .primer-wc-cart-sub-menu { @media only screen and (max-width: 40.063em) { .primer-wc-cart-menu .primer-wc-cart-sub-menu .widget_shopping_cart { width: 100%; } } + +/*-------------------------------------------------------------- +>>> Gutenberg: +--------------------------------------------------------------*/ +.wp-block-cover-image { + margin-bottom: 1.5rem; } + +[class^="wp-block-"].alignfull { + width: 100.5vw; + position: relative; + right: 50%; + left: 50%; + margin-right: -50vw; + margin-left: -50vw; } + @media only screen and (max-width: 40.063em) { + [class^="wp-block-"].alignfull { + width: 100vw; } } + [class^="wp-block-"].alignfull img { + width: 100%; } + +[class^="wp-block-"].alignwide { + margin-right: -1.5%; + margin-left: -1.5%; + width: 102%; } + @media only screen and (min-width: 40.063em) and (max-width: 61.063em) { + [class^="wp-block-"].alignwide { + margin-right: -1.25%; + margin-left: -1.25%; + width: 102.5%; } } + +.wp-block-image.alignleft, +.wp-block-gallery.alignleft, +.wp-block-video.alignleft, +.wp-block-quote.alignleft, +.wp-block-text-columns.alignleft, +.entry-content ul.alignleft, +.entry-content ol.alignleft, +.wp-block-cover-text.alignleft { + margin: 0 0 0.5em 1em; } + +.wp-block-image.alignright, +.wp-block-gallery.alignright, +.wp-block-video.alignright, +.wp-block-quote.alignright, +.wp-block-text-columns.alignright, +.entry-content ul.alignright, +.entry-content ol.alignright, +.wp-block-cover-text.alignright { + margin: 0 1em 0.5em 0; } + +.wp-block-image.alignleft, .wp-block-image.alignright, +.wp-block-gallery.alignleft, +.wp-block-gallery.alignright, +.wp-block-video.alignleft, +.wp-block-video.alignright, +.wp-block-quote.alignleft, +.wp-block-quote.alignright, +.wp-block-text-columns.alignleft, +.wp-block-text-columns.alignright, +.entry-content ul.alignleft, +.entry-content ul.alignright, +.entry-content ol.alignleft, +.entry-content ol.alignright, +.wp-block-cover-text.alignleft, +.wp-block-cover-text.alignright { + max-width: 40%; + width: 100%; } + .wp-block-image.alignleft img, .wp-block-image.alignright img, + .wp-block-gallery.alignleft img, + .wp-block-gallery.alignright img, + .wp-block-video.alignleft img, + .wp-block-video.alignright img, + .wp-block-quote.alignleft img, + .wp-block-quote.alignright img, + .wp-block-text-columns.alignleft img, + .wp-block-text-columns.alignright img, + .entry-content ul.alignleft img, + .entry-content ul.alignright img, + .entry-content ol.alignleft img, + .entry-content ol.alignright img, + .wp-block-cover-text.alignleft img, + .wp-block-cover-text.alignright img { + width: inherit; } + +.wp-block-gallery { + margin-right: 0; + margin-left: 0; } + .wp-block-gallery.is-cropped .blocks-gallery-item img { + height: auto; } + +.wp-block-quote p { + margin-bottom: 0; } + +.wp-block-pullquote { + margin-top: 1em; + margin-bottom: 1em; } + +.wp-block-button.aligncenter { + margin-bottom: 1.5em; } + +.wp-block-audio audio { + width: 100%; } diff --git a/style.css b/style.css index 9976704..d386acf 100644 --- a/style.css +++ b/style.css @@ -2650,3 +2650,105 @@ body.woocommerce-cart .primer-wc-cart-sub-menu { @media only screen and (max-width: 40.063em) { .primer-wc-cart-menu .primer-wc-cart-sub-menu .widget_shopping_cart { width: 100%; } } + +/*-------------------------------------------------------------- +>>> Gutenberg: +--------------------------------------------------------------*/ +.wp-block-cover-image { + margin-bottom: 1.5rem; } + +[class^="wp-block-"].alignfull { + width: 100.5vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; } + @media only screen and (max-width: 40.063em) { + [class^="wp-block-"].alignfull { + width: 100vw; } } + [class^="wp-block-"].alignfull img { + width: 100%; } + +[class^="wp-block-"].alignwide { + margin-left: -1.5%; + margin-right: -1.5%; + width: 102%; } + @media only screen and (min-width: 40.063em) and (max-width: 61.063em) { + [class^="wp-block-"].alignwide { + margin-left: -1.25%; + margin-right: -1.25%; + width: 102.5%; } } + +.wp-block-image.alignleft, +.wp-block-gallery.alignleft, +.wp-block-video.alignleft, +.wp-block-quote.alignleft, +.wp-block-text-columns.alignleft, +.entry-content ul.alignleft, +.entry-content ol.alignleft, +.wp-block-cover-text.alignleft { + margin: 0 1em 0.5em 0; } + +.wp-block-image.alignright, +.wp-block-gallery.alignright, +.wp-block-video.alignright, +.wp-block-quote.alignright, +.wp-block-text-columns.alignright, +.entry-content ul.alignright, +.entry-content ol.alignright, +.wp-block-cover-text.alignright { + margin: 0 0 0.5em 1em; } + +.wp-block-image.alignleft, .wp-block-image.alignright, +.wp-block-gallery.alignleft, +.wp-block-gallery.alignright, +.wp-block-video.alignleft, +.wp-block-video.alignright, +.wp-block-quote.alignleft, +.wp-block-quote.alignright, +.wp-block-text-columns.alignleft, +.wp-block-text-columns.alignright, +.entry-content ul.alignleft, +.entry-content ul.alignright, +.entry-content ol.alignleft, +.entry-content ol.alignright, +.wp-block-cover-text.alignleft, +.wp-block-cover-text.alignright { + max-width: 40%; + width: 100%; } + .wp-block-image.alignleft img, .wp-block-image.alignright img, + .wp-block-gallery.alignleft img, + .wp-block-gallery.alignright img, + .wp-block-video.alignleft img, + .wp-block-video.alignright img, + .wp-block-quote.alignleft img, + .wp-block-quote.alignright img, + .wp-block-text-columns.alignleft img, + .wp-block-text-columns.alignright img, + .entry-content ul.alignleft img, + .entry-content ul.alignright img, + .entry-content ol.alignleft img, + .entry-content ol.alignright img, + .wp-block-cover-text.alignleft img, + .wp-block-cover-text.alignright img { + width: inherit; } + +.wp-block-gallery { + margin-left: 0; + margin-right: 0; } + .wp-block-gallery.is-cropped .blocks-gallery-item img { + height: auto; } + +.wp-block-quote p { + margin-bottom: 0; } + +.wp-block-pullquote { + margin-top: 1em; + margin-bottom: 1em; } + +.wp-block-button.aligncenter { + margin-bottom: 1.5em; } + +.wp-block-audio audio { + width: 100%; }