diff --git a/quadrat/assets/theme.css b/quadrat/assets/theme.css index ef22e180f0..b08b3ac138 100644 --- a/quadrat/assets/theme.css +++ b/quadrat/assets/theme.css @@ -1,2 +1,38 @@ +/** + * Breakpoints & Media Queries + */ +/** + * Breakpoint mixins + */ +/** + * Long content fade mixin + * + * Creates a fading overlay to signify that the content is longer + * than the space allows. + */ +/** + * Focus styles. + */ +/** + * Applies editor left position to the selector passed as argument + */ +/** + * Styles that are reused verbatim in a few places + */ +/** + * Allows users to opt-out of animations via OS-level preferences. + */ +/** + * Reset default styles for JavaScript UI based pages. + * This is a WP-admin agnostic reset + */ +/** + * Reset the WP Admin page styles for Gutenberg-like pages. + */ +@media (max-width: 479px) { + .wp-block-media-text .wp-block-media-text__content { + padding: var(--wp--custom--margin--vertical) 0; + } +} /*# sourceMappingURL=theme.css.map */ \ No newline at end of file diff --git a/quadrat/experimental-theme.json b/quadrat/experimental-theme.json index d21aa62c57..1e4b7246fa 100644 --- a/quadrat/experimental-theme.json +++ b/quadrat/experimental-theme.json @@ -372,7 +372,7 @@ "typography": { "fontSize": "16px", "fontFamily": "var(--wp--preset--font-family--headings)", - "lineHeight": "vvar(--wp--custom--line-height--headings--h6)", + "lineHeight": "var(--wp--custom--line-height--headings--h6)", "fontWeight": "var(--wp--custom--heading--typography--font-weight)" } }, diff --git a/quadrat/inc/block-patterns.php b/quadrat/inc/block-patterns.php index a20ba2bceb..8d2fe27826 100644 --- a/quadrat/inc/block-patterns.php +++ b/quadrat/inc/block-patterns.php @@ -11,19 +11,64 @@ function quadrat_register_block_patterns() { if ( function_exists( 'register_block_pattern_category' ) ) { register_block_pattern_category( - 'quadrat-blocks', - array( 'label' => __( 'Quadrat', 'quadrat-blocks' ) ) + 'quadrat', + array( 'label' => __( 'Quadrat', 'quadrat' ) ) ); } if ( function_exists( 'register_block_pattern' ) ) { register_block_pattern( - 'quadrat-blocks/example', + 'quadrat/headline-button', array( - 'title' => __( 'Alternating Grid of Latest Posts', 'quadrat-blocks' ), - 'categories' => array( 'quadrat-blocks' ), - 'content' => '', + 'title' => __( 'Headline and button', 'quadrat' ), + 'categories' => array( 'quadrat' ), + 'content' => ' +
+

' . esc_html__( 'The Hosts', 'quadrat') . '

+ + + +

' . esc_html__( 'Samantha and Olivia are both writers and activists.', 'quadrat') . '

+ + + + + + + +
+ +
+
+ ', + ) + ); + + register_block_pattern( + 'quadrat/media-text-button', + array( + 'title' => __( 'Media and text with button', 'quadrat' ), + 'categories' => array( 'quadrat' ), + 'content' => ' +
' . esc_attr__( 'Illustration of two women.' ) . '
+

' . esc_html__( 'The Hosts', 'quadrat') . '

+ + + +

' . esc_html__( 'Sarah & Olivia are both writers and activists.', 'quadrat') . '

+ + + + + + + + +
+ ', ) ); diff --git a/quadrat/sass/blocks/_media-text.scss b/quadrat/sass/blocks/_media-text.scss new file mode 100644 index 0000000000..5fbd531758 --- /dev/null +++ b/quadrat/sass/blocks/_media-text.scss @@ -0,0 +1,5 @@ +.wp-block-media-text .wp-block-media-text__content { + @include break-mobile-only(){ + padding: var(--wp--custom--margin--vertical) 0; + } +} \ No newline at end of file diff --git a/quadrat/sass/theme.scss b/quadrat/sass/theme.scss index e69de29bb2..0ff7766c72 100644 --- a/quadrat/sass/theme.scss +++ b/quadrat/sass/theme.scss @@ -0,0 +1,2 @@ +@import '../../blank-canvas-blocks/sass/base/breakpoints'; // Get the mobile-only media query and make it available to this theme's styles +@import 'blocks/media-text'; \ No newline at end of file