diff --git a/course/assets/css/blocks/core-comments.css b/course/assets/css/blocks/core-comments.css new file mode 100644 index 0000000000..403dd7aa05 --- /dev/null +++ b/course/assets/css/blocks/core-comments.css @@ -0,0 +1,157 @@ +.wp-block-comments .wp-block-post-comments-form:not(last-child) { + margin-bottom: var(--wp--custom--comment-gap); +} + +.comment-reply-title a { + font-size: var(--wp--preset--font-size--x-small); +} + +.wp-block-comments .wp-block-comments-pagination { + margin-top: calc( var(--wp--custom--comment-gap) / 2 * -1 ); + margin-bottom: var(--wp--custom--comment-gap); +} + +.wp-block-comments hr, +.wp-block-comments .wp-block-comments-title { + margin-bottom: clamp(2.5rem, 2.167rem + 1.111vw, 3rem); +} + +.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"] { + display: none; +} + +.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"] + label:before { + border: 1px solid var(--wp--preset--color--foreground); + content: "\00a0"; + display: inline-block; + font-size: 1rem; + height: 16px; + padding: 0; + vertical-align: center; + width: 16px; + border-radius: 4px; + margin-right: var(--wp--custom--comment-gap-small); +} + +.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"]:checked + label:before { + color: green; + content: "\2713"; + text-align: center; +} + +.wp-block-post-comments-form h3.comment-reply-title { + margin-bottom: var(--wp--preset--spacing--60); +} + +.wp-block-post-comments-form .comment-form-comment label { + display: inline-block; +} + +.wp-block-post-comments-form .comment-form-comment label, +.wp-block-post-comments-form .comment-form-author label, +.wp-block-post-comments-form .comment-form-url label, +.wp-block-post-comments-form .comment-form-email label +{ + margin-bottom: 5px; +} + +.wp-block-post-comments-form form.comment-form .form-submit { + margin-top: var(--wp--preset--spacing--50); +} + +.wp-block-post-comments-form form.comment-form p input:not([type=submit]), +.wp-block-post-comments-form form.comment-form textarea { + border: 1px solid var(--wp--preset--color--foreground); + border-radius: var(--wp--custom--button--radius); + background-color: var(--wp--preset--color--background); + color: var(--wp--preset--color--foreground); + font-size: var(--wp--preset--font-size--x-small); + padding: 11px; +} + +.wp-block-post-comments-form .comment-form-cookies-consent label { + margin: auto 0; +} + +.wp-block-post-comments-form .comment-form-cookies-consent { + align-items: center; + gap: var(--wp--preset--spacing--30); +} + +.wp-block-post-comments-form .comment-form-cookies-consent input { + transform: scale(1.3); + background-color: transparent; + accent-color: red; +} + +.wp-block-post-comments-form .comment-form { + display: grid; + grid-template-columns: 1fr 1fr; + grid-column-gap: var(--wp--custom--reply-column-gap); + grid-row-gap: var(--wp--custom--comment-gap-medium); +} + +@media screen and (max-width: 480px) { + .wp-block-post-comments-form .comment-form { + display: flex; + flex-direction: column; + gap: calc(var(--wp--preset--spacing--60) - var(--wp--preset--spacing--40)); + } +} + +.wp-block-post-comments-form .comment-form p, +.wp-block-post-comments-form h3 { + margin-block-start: 0; + margin-block-end: 0; +} + +.wp-block-post-comments-form .comment-form .comment-notes { + display: none; +} + +.wp-block-post-comments-form .comment-form .comment-form-author { + order: 1; + grid-column: 1 / 3; +} + +.wp-block-post-comments-form .comment-form .comment-form-email { + order: 2; + grid-column: 1 / 2; +} + +.wp-block-post-comments-form .comment-form .comment-form-url { + order: 3; + grid-column: 2 / 3; +} + +.wp-block-post-comments-form .comment-form .comment-form-comment { + order: 4; + grid-column: 1 / 3; +} + +.wp-block-post-comments-form .comment-form .comment-form-cookies-consent { + order: 5; + grid-column: 1 / 3; +} + +.wp-block-post-comments-form .comment-form .wp-block-button { + order: 6; + grid-column: 1 / 2; +} + +.wp-block-comments .wp-block-comment-template .wp-block-comment-author-name { + margin-bottom: var(--wp--custom--comment-gap-small); +} + +.wp-block-comments .wp-block-comment-template .wp-block-comment-content p { + margin-block-start: var(--wp--custom--comment-gap-medium); + margin-block-end: var(--wp--custom--comment-gap-small); +} + +.wp-block-comments .comment > .is-vertical > .wp-block-group { + align-items: flex-start; +} + +.wp-block-comments .comment > div > div > .is-vertical { + gap: 0; +} \ No newline at end of file diff --git a/course/assets/css/blocks/core-navigation.css b/course/assets/css/blocks/core-navigation.css new file mode 100644 index 0000000000..58245fc9d4 --- /dev/null +++ b/course/assets/css/blocks/core-navigation.css @@ -0,0 +1,53 @@ +.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open { + background-color: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--background); + padding: 1.5rem; +} + +/* theme.json's blockGap does not work. */ +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { + gap: var(--wp--custom--nav-mobile-gap); +} + +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { + color: var(--wp--preset--color--background); +} + +.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a.wp-block-navigation-item__content { + line-height: 90%; +} + +.wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-link.is-style-navigation-link-button a { + font-size: var(--wp--custom--typography--font-sizes--button); + border-radius: var(--wp--custom--button--radius); +} + +.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-link.is-style-navigation-link-button a { + background-color: var(--wp--preset--color--foreground); + color: var(--wp--preset--color--background); + padding: 15.5px 32px; + border: 1px solid var(--wp--preset--color--foreground); +} + +.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-link.is-style-navigation-link-button a:hover { + background-color: var(--wp--preset--color--background); + color: var(--wp--preset--color--foreground); +} + +.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link:not(.is-style-navigation-link-button) a { + font-size: var(--wp--preset--font-size--xx-large); +} + +.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link.is-style-navigation-link-button a { + color: var(--wp--preset--color--foreground); + background-color: var(--wp--preset--color--background); + width: calc(100vw - 3rem); + text-align: center; + padding: 17.5px 0px; + margin-top: calc(7.5rem - var(--wp--custom--nav-mobile-gap)); +} + +.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link.is-style-navigation-link-button a:hover { + background-color: var(--wp--preset--color--background); + color: var(--wp--preset--color--foreground); +} \ No newline at end of file diff --git a/course/assets/css/blocks/core-query-pagination.css b/course/assets/css/blocks/core-query-pagination.css new file mode 100644 index 0000000000..1ca875af74 --- /dev/null +++ b/course/assets/css/blocks/core-query-pagination.css @@ -0,0 +1,7 @@ +.wp-block-query-pagination .wp-block-query-pagination-numbers > *:not(:last-child) { + margin-right: clamp(1.44rem, 1.91vw + 0.97rem, 2.5rem); +} + +.wp-block-query-pagination .page-numbers.current { + text-decoration: underline; +} \ No newline at end of file diff --git a/course/assets/css/blocks/core-query.css b/course/assets/css/blocks/core-query.css new file mode 100644 index 0000000000..bbc59f7f78 --- /dev/null +++ b/course/assets/css/blocks/core-query.css @@ -0,0 +1,4 @@ +.sensei-lms-course-list-featured-label__text { + font-family: var(--wp--preset--font-family--system); + text-transform: uppercase; +} \ No newline at end of file diff --git a/course/assets/css/default.css b/course/assets/css/default.css index dd58a0a626..4294064ae8 100644 --- a/course/assets/css/default.css +++ b/course/assets/css/default.css @@ -1,9 +1,6 @@ -/* -* Styles specific to default variation -*/ .wp-block-button.is-style-outline .wp-block-button__link { - padding-top: var(--wp--custom--button--spacing--padding--top); - padding-right: var(--wp--custom--button--spacing--padding--right); - padding-bottom: var(--wp--custom--button--spacing--padding--bottom); - padding-left: var(--wp--custom--button--spacing--padding--left); + padding-top: var(--wp--custom--button--spacing--padding--top); + padding-right: var(--wp--custom--button--spacing--padding--right); + padding-bottom: var(--wp--custom--button--spacing--padding--bottom); + padding-left: var(--wp--custom--button--spacing--padding--left); } \ No newline at end of file diff --git a/course/functions.php b/course/functions.php index acaa182b56..b8ecb32e7b 100644 --- a/course/functions.php +++ b/course/functions.php @@ -49,6 +49,28 @@ function course_scripts() { add_action( 'wp_enqueue_scripts', 'course_scripts' ); +function course_enqueue_block_styles() { + $blocks = array( + 'core/comments', + 'core/navigation', + 'core/query-pagination', + 'core/query', + ); + + foreach ( $blocks as $block ) { + // Replace slash with hyphen for filename. + $slug = str_replace( '/', '-', $block ); + + wp_enqueue_block_style( $block, array( + 'handle' => "course-block-{$slug}", + 'src' => get_theme_file_uri( "assets/css/blocks/{$slug}.css" ), + 'path' => get_theme_file_path( "assets/css/blocks/{$slug}.css" ) + ) ); + } +} + +add_action( 'init', 'course_enqueue_block_styles' ); + function course_theme_init() { register_block_style( 'core/navigation-link', diff --git a/course/style.css b/course/style.css index 25b83db8fa..9561842663 100644 --- a/course/style.css +++ b/course/style.css @@ -21,315 +21,36 @@ Tags: block-patterns, eLearning, education, full-site-editing, lms, online cours -webkit-font-smoothing: antialiased; } -/** - * Currently table styles are only available with 'wp-block-styles' theme support (block css) thus the following needs to be included - * since 'wp-block-styles' aren't used for this theme. - */ -.wp-block-table thead { - border-bottom: 3px solid; -} - -.wp-block-table tfoot { - border-top: 3px solid; -} - -.wp-block-table td, -.wp-block-table th { - padding: var(--wp--preset--spacing--30); - border: 1px solid; - word-break: normal; -} - -.wp-block-table figcaption { - font-size: var(--wp--preset--font-size--small); - text-align: center; -} - - /* Background and text color, padding around for navbar, only for mobile view. Desktop view has separate color */ - .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open.has-modal-open { - background-color: var(--wp--preset--color--foreground); - color: var(--wp--preset--color--background); - padding: 1.5rem; - } - - /* Distance between navigation menu items in mobile view, theme.json blockgap not working for navigation block */ - .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { - gap: var(--wp--custom--nav-mobile-gap); - } - - /* Color of the cross button in navbar mobile view */ - .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { - color: var(--wp--preset--color--background); - } - -/* line height of the menu items in mobile view, to match design */ - .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container a.wp-block-navigation-item__content { - line-height: 90%; - } - - /* The navigation item that looks like a button in the design has a different front size and the button is rounded */ - .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation-link.is-style-navigation-link-button a { - font-size: var(--wp--custom--typography--font-sizes--button); - border-radius: 8px; -} - -/* Background & text color, padding and border of the navbar button */ -.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-link.is-style-navigation-link-button a { - background-color: var(--wp--preset--color--foreground); - color: var(--wp--preset--color--background); - padding: 15.5px 32px; - border: 1px solid var(--wp--preset--color--foreground); -} - -/* Navbar button color change on hover */ -.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-link.is-style-navigation-link-button a:hover { - background-color: var(--wp--preset--color--background); - color: var(--wp--preset--color--foreground); -} - -/* Set the font size of the menu items in mobile view, except for the button menu item */ -.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link:not(.is-style-navigation-link-button) a { - font-size: var(--wp--preset--font-size--xx-large); -} - -/* Design for the navbar button item, in case of mobile view. Has extra margin on top as per design */ -.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link.is-style-navigation-link-button a { - color: var(--wp--preset--color--foreground); - background-color: var(--wp--preset--color--background); - width: calc(100vw - 3rem); - text-align: center; - padding: 17.5px 0px; - margin-top: calc(7.5rem - var(--wp--custom--nav-mobile-gap)); -} - -/* Separate hover behavior for navbar button, applicable when in mobile view, as the colors are separate for mobile view */ -.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-link.is-style-navigation-link-button a:hover { - background-color: var(--wp--preset--color--background); - color: var(--wp--preset--color--foreground); -} - -header { - background-color: transparent; -} - - -.wp-site-blocks header ~ main { - margin-block-start: 0; -} - -header .navigation-wrapper { - min-height: 116px; -} - h1, h2, h3, h4, h5, h6 { text-transform: revert; -} -/* - * Comments - */ -.wp-block-comments .wp-block-post-comments-form:not(last-child) { - margin-bottom: var(--wp--custom--comment-gap); -} - -.comment-reply-title a { - font-size: var(--wp--preset--font-size--x-small); -} - -.wp-block-comments .wp-block-comments-pagination { - margin-top: calc( var(--wp--custom--comment-gap) / 2 * -1 ); - margin-bottom: var(--wp--custom--comment-gap); -} - -.wp-block-comments hr, -.wp-block-comments .wp-block-comments-title { - margin-bottom: clamp(2.5rem, 2.167rem + 1.111vw, 3rem); -} - -.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"] { - display: none; -} - -.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"] + label:before { - border: 1px solid var(--wp--preset--color--foreground); - content: "\00a0"; - display: inline-block; - font-size: 1rem; - height: 16px; - padding: 0; - vertical-align: center; - width: 16px; - border-radius: 4px; - margin-right: var(--wp--custom--comment-gap-small); -} - -.wp-block-post-comments-form .comment-form-cookies-consent input[type="checkbox"]:checked + label:before { - color: green; - content: "\2713"; - text-align: center; -} - - -.wp-block-post-comments-form h3.comment-reply-title { - margin-bottom: var(--wp--preset--spacing--60); -} - -.wp-block-post-comments-form .comment-form-comment label { - display: inline-block; -} - -.wp-block-post-comments-form .comment-form-comment label, -.wp-block-post-comments-form .comment-form-author label, -.wp-block-post-comments-form .comment-form-url label, -.wp-block-post-comments-form .comment-form-email label -{ - margin-bottom: 5px; -} - -.wp-block-post-comments-form form.comment-form .form-submit { - margin-top: var(--wp--preset--spacing--50); -} - -.wp-block-post-comments-form form.comment-form p input:not([type=submit]), -.wp-block-post-comments-form form.comment-form textarea { - border: 1px solid var(--wp--preset--color--foreground); - border-radius: 8px; - background-color: var(--wp--preset--color--background); - color: var(--wp--preset--color--foreground); - font-size: var(--wp--preset--font-size--x-small); - padding: 11px; -} - -.wp-block-post-comments-form .comment-form-cookies-consent label { - margin: auto 0; -} - -.wp-block-post-comments-form .comment-form-cookies-consent { - align-items: center; - gap: var(--wp--preset--spacing--30); -} - -.wp-block-post-comments-form .comment-form-cookies-consent input { - transform: scale(1.3); - background-color: transparent; - accent-color: red; -} - -.wp-block-post-comments-form .comment-form { - display: grid; - grid-template-columns: 1fr 1fr; - grid-column-gap: var(--wp--custom--reply-column-gap); - grid-row-gap: var(--wp--custom--comment-gap-medium); -} - -@media screen and (max-width: 480px) { - .wp-block-post-comments-form .comment-form { - display: flex; - flex-direction: column; - gap: calc(var(--wp--preset--spacing--60) - var(--wp--preset--spacing--40)); - } -} - -.wp-block-post-comments-form .comment-form p, -.wp-block-post-comments-form h3 { - margin-block-start: 0; - margin-block-end: 0; -} - -.wp-block-post-comments-form .comment-form .comment-notes { - display: none; -} - -.wp-block-post-comments-form .comment-form .comment-form-author { - order: 1; - grid-column: 1 / 3; } -.wp-block-post-comments-form .comment-form .comment-form-email { - order: 2; - grid-column: 1 / 2; -} - -.wp-block-post-comments-form .comment-form .comment-form-url { - order: 3; - grid-column: 2 / 3; -} - -.wp-block-post-comments-form .comment-form .comment-form-comment { - order: 4; - grid-column: 1 / 3; -} - -.wp-block-post-comments-form .comment-form .comment-form-cookies-consent { - order: 5; - grid-column: 1 / 3; -} - -.wp-block-post-comments-form .comment-form .wp-block-button { - order: 6; - grid-column: 1 / 2; -} - -.wp-block-comments .wp-block-comment-template .wp-block-comment-author-name { - margin-bottom: var(--wp--custom--comment-gap-small); -} - -.wp-block-comments .wp-block-comment-template .wp-block-comment-content p { - margin-block-start: var(--wp--custom--comment-gap-medium); - margin-block-end: var(--wp--custom--comment-gap-small); -} - -.wp-block-comments .comment > .is-vertical > .wp-block-group { - align-items: flex-start; -} - -.wp-block-comments .comment > div > div > .is-vertical { - gap: 0; -} - -/* - * Link styles - */ a { text-decoration-thickness: .0625em !important; text-underline-offset: .15em } /* - * Search styles - */ -.wp-block-search__input { - background-color: var(--wp--preset--color--background); - border-color: var(--wp--preset--color--foreground); - padding: 1.063rem; -} - -/* - * Search Results Styles + * Header */ -.search .wp-block-post-template .wp-block-post { - margin: 0; +header { + background-color: transparent; } -.search .wp-block-post.course { - border-bottom: 0; - margin: 0; - padding: 0; +header .navigation-wrapper { + min-height: 116px; } -/* Buttons */ -.wp-block-button__link:focus { - outline: var(--wp--preset--color--foreground) dashed; - outline-offset: 1px; +.wp-site-blocks header ~ main { + margin-block-start: 0; } /* -* Control the hover stylings of outline block style. -* Unnecessary once block styles are configurable via theme.json +* Outline Buttons */ .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):active { background-color: var(--wp--preset--color--secondary); border-color: var(--wp--preset--color--button-border-active); - color: var(--wp--preset--color--primary); } .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover { @@ -338,11 +59,6 @@ a { color: var(--wp--preset--color--secondary); } -.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus { - border-color: var(--wp--preset--color--foreground); - color: var(--wp--preset--color--foreground); -} - .wp-block-button.is-style-outline > .wp-block-button__link, .wp-block-button .wp-block-button__link.is-style-outline { background-color: transparent; @@ -353,37 +69,10 @@ a { } /* - * Pagination styles + * Search Results */ -.wp-block-query-pagination .wp-block-query-pagination-numbers > *:not(:last-child) { - margin-right: clamp(1.44rem, 1.91vw + 0.97rem, 2.5rem); -} - -.wp-block-query-pagination .page-numbers.current { - text-decoration: underline; -} - -/* Add border around author image in Post Author block */ -.wp-block-post-author__avatar img { - border: 1px solid var(--wp--preset--color--tertiary); - border-radius: 4px; -} - -/* Design for search box in 404 page template sidebar */ -.course-search-sidebar button { - padding: clamp(12px, calc(0.75rem + ((1vw - 4.8px) * 0.5556)), 16px); - color: var(--wp--preset--color--tertiary); - vertical-align: center; -} - -.course-search-sidebar button svg { - height: 32px; - width: 32px; - vertical-align: bottom; -} - -.course-search-sidebar input.wp-block-search__input { - line-height: 100%; +.search .wp-block-post-template .wp-block-post { + margin: 0; } /* Newsletter */ @@ -407,10 +96,6 @@ a { } /* Footer */ -footer .wp-block-column .wp-block-spacer { - height: 20px; -} - footer .wp-block-column a, footer .wp-block-column p, footer .wp-block-column h3 { @@ -429,69 +114,26 @@ footer .wp-block-column h3 { } } -footer.wp-block-template-part { +footer.wp-block-template-part { margin-block-start: 0; } - -/* - * "Wide Width, No Title" page template - */ - -/* Remove extra space from group blocks */ -body.page-template-page-wide-width .wp-block-post-content .wp-block-group, -body.page-template-page-wide-width footer .wp-block-group { - margin-block-end: 0; -} - -/* -* Sensei-specific styles -*/ -.wp-block-sensei-lms-course-overview a { - text-decoration: underline; -} - -.wp-block-sensei-lms-course-list .sensei-cta a:hover, -.wp-block-sensei-lms-course-list .sensei-cta a:focus { - text-decoration: none; -} - -/* The first 3 CSS selectors can be removed after allowing enough time (let's say 1 month)for sites - * to update to the Sensei LMS plugin version containing the changes to the CSS class names. - */ -.course-list-featured-label__featured-image, -.course-list-featured-label__course-categories, -.sensei-lms-featured-badge, -.sensei-lms-course-list-featured-label__text { - font-family: var(--wp--preset--font-family--system); - text-transform: uppercase; -} - -/* - * Style Variations - */ - -/* Workaround for https://github.com/WordPress/gutenberg/issues/35480. */ -.wp-block-social-links .wp-block-social-link .wp-block-social-link-anchor svg { - color: var(--wp--preset--color--primary); -} - - -.footer-title{ - white-space: normal; -} - .footer-title a:hover { text-decoration: none; } @media screen and (max-width: 700px) { - .footer-title{ + .footer-title { font-size: 86px; padding-left: 20px; padding-right: 20px; } - .separator { - top: -25px; - } } + +/* + * "Wide Width, No Title" Page Template + */ +body.page-template-page-wide-width .wp-block-post-content .wp-block-group, +body.page-template-page-wide-width footer .wp-block-group { + margin-block-end: 0; +} \ No newline at end of file diff --git a/course/theme.json b/course/theme.json index d81ad9ac26..d05da51cff 100644 --- a/course/theme.json +++ b/course/theme.json @@ -148,11 +148,6 @@ "courseThemeVariation": "default", "button": { "radius": "0.5rem", - "typography": { - "fontFamily": "var(--wp--preset--font-family--heading)", - "fontWeight": "400", - "letterSpacing": "0.05em" - }, "spacing": { "padding": { "top": "0.5856em", @@ -160,6 +155,11 @@ "bottom": "0.5856em", "left": "1.5238em" } + }, + "typography": { + "fontFamily": "var(--wp--preset--font-family--heading)", + "fontWeight": "400", + "letterSpacing": "0.05em" } } }, @@ -350,12 +350,6 @@ }, "styles": { "blocks": { - "sensei-lms/course-categories": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system)", - "textTransform": "uppercase" - } - }, "core/avatar": { "border": { "radius": "24px", @@ -382,64 +376,6 @@ "fontFamily": "monospace" } }, - "core/comments": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system)", - "fontSize": "var(--wp--preset--font-size--x-small)", - "lineHeight": "var(--wp--preset--font-size--x-small)", - "fontWeight": "400" - }, - "elements": { - "link": { - "typography": { - "textDecoration": "underline" - } - } - }, - "spacing": { - "blockGap": "0px" - } - }, - "core/post-comments-form": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system)", - "fontSize": "11px", - "lineHeight": "145%", - "textTransform": "uppercase" - }, - "elements": { - "heading": { - "typography": { - "fontSize": "var(--wp--custom--typography--font-sizes--normal)", - "fontFamily": "var(--wp--preset--font-family--system)", - "textTransform": "none", - "fontWeight": "600", - "letterSpacing": "-0.24px", - "lineHeight": "100%" - } - }, - "button": { - "border": { - "radius": "var(--wp--custom--button--radius)" - }, - "color": { - "background": "var(--wp--preset--color--foreground)" - }, - "typography": { - "textTransform": "uppercase", - "fontFamily": "var(--wp--preset--font-family--heading)", - "fontSize": "var(--wp--custom--typography--font-sizes--button)", - "lineHeight": "100%" - }, - "spacing": { - "padding": { - "top": "1.125rem", - "bottom": "1.125rem" - } - } - } - } - }, "core/comment-author-name": { "typography": { "lineHeight": "100%" @@ -455,13 +391,6 @@ } } }, - "core/comments-title": { - "typography": { - "fontSize": "var(--wp--preset--font-size--medium)", - "fontFamily": "var(--wp--preset--font-family--system)", - "letterSpacing": "-0.01em" - } - }, "core/comment-content": { "typography": { "fontSize": "var(--wp--custom--typography--font-sizes--normal)", @@ -513,6 +442,31 @@ } } }, + "core/comments": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system)", + "fontSize": "var(--wp--preset--font-size--x-small)", + "lineHeight": "var(--wp--preset--font-size--x-small)", + "fontWeight": "400" + }, + "elements": { + "link": { + "typography": { + "textDecoration": "underline" + } + } + }, + "spacing": { + "blockGap": "0px" + } + }, + "core/comments-title": { + "typography": { + "fontSize": "var(--wp--preset--font-size--medium)", + "fontFamily": "var(--wp--preset--font-family--system)", + "letterSpacing": "-0.01em" + } + }, "core/gallery": { "spacing": { "margin": { @@ -545,12 +499,47 @@ } } }, - "core/post-featured-image": { - "border": { - "color": "var(--wp--preset--color--foreground)", - "radius": "4px", - "style": "solid", - "width": "1px" + "core/post-author": { + "css": "& img { border: 1px solid var(--wp--preset--color--tertiary); border-radius: 4px; }" + }, + "core/post-comments-form": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system)", + "fontSize": "11px", + "lineHeight": "145%", + "textTransform": "uppercase" + }, + "elements": { + "heading": { + "typography": { + "fontSize": "var(--wp--custom--typography--font-sizes--normal)", + "fontFamily": "var(--wp--preset--font-family--system)", + "textTransform": "none", + "fontWeight": "600", + "letterSpacing": "-0.24px", + "lineHeight": "100%" + } + }, + "button": { + "border": { + "radius": "var(--wp--custom--button--radius)" + }, + "color": { + "background": "var(--wp--preset--color--foreground)" + }, + "typography": { + "textTransform": "uppercase", + "fontFamily": "var(--wp--preset--font-family--heading)", + "fontSize": "var(--wp--custom--typography--font-sizes--button)", + "lineHeight": "100%" + }, + "spacing": { + "padding": { + "top": "1.125rem", + "bottom": "1.125rem" + } + } + } } }, "core/post-content": { @@ -610,6 +599,14 @@ "lineHeight": "1.3" } }, + "core/post-featured-image": { + "border": { + "color": "var(--wp--preset--color--foreground)", + "radius": "4px", + "style": "solid", + "width": "1px" + } + }, "core/post-terms": { "typography": { "textDecoration": "underline" @@ -662,67 +659,19 @@ } } }, - "sensei-lms/course-navigation": { - "spacing": { - "padding": { - "top": "1rem" - } - }, - "typography": { - "fontFamily": "var(--wp--preset--font-family--system)" - }, - "css": "& .sensei-lms-course-navigation-module__summary { font-family: var(--wp--preset--font-family--system); }" - }, - "sensei-lms/course-theme-notices": { - "css": "& .sensei-course-theme-quiz-graded-notice__text { font-size: clamp(1.25rem, 1.083rem + 0.556vw, 1.5rem); } & .sensei-course-theme-quiz-graded-notice__reset-quiz-form .sensei-course-theme__button { font-size: clamp(1.313rem, 1.188rem + 0.417vw, 1.5rem); }", + "core/query-pagination": { "elements": { - "h2": { + "link": { "typography": { - "fontFamily": "var(--wp--preset--font-family--system)", - "fontSize": "clamp(1.5rem, 1.167rem + 1.111vw, 2rem)", - "fontWeight": "590" + "textDecoration": "none", + "textTransform": "uppercase" } } - } - }, - "sensei-lms/course-title": { - "typography": { - "fontSize": "clamp(1.5rem, 1.5rem + 0vw, 1.5rem)" - } - }, - "sensei-lms/course-theme-course-progress-bar": { - "color": { - "background": "#F8F5F3" - } - }, - "sensei-lms/course-theme-course-progress-counter": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system)", - "fontSize": "1rem", - "letterSpacing": "0.02em" - } - }, - "sensei-lms/course-theme-lesson-module": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system)", - "letterSpacing": "-0.01em", - "textTransform": "none" - } - }, - "sensei-lms/exit-course": { - "typography": { - "fontFamily": "var(--wp--preset--font-family--system)", - "fontSize": "1rem", - "letterSpacing": "0.02em", - "lineHeight": "1" - } - }, - "sensei-lms/page-actions": { + }, "typography": { "fontFamily": "var(--wp--preset--font-family--heading)", - "fontSize": "var(--wp--custom--typography--font-sizes--button)", - "letterSpacing": "0.05em", - "lineHeight": "2.666666666666667" + "fontSize": "var(--wp--preset--font-size--medium)", + "letterSpacing": "0.01em" } }, "core/quote": { @@ -751,6 +700,7 @@ } }, "core/search": { + "css": "& .wp-block-search__input { background-color: var(--wp--preset--color--background); border-color: var(--wp--preset--color--foreground); border-radius: var(--wp--custom--button--radius); padding: 1rem; }", "typography": { "fontSize": "var(--wp--preset--font-size--x-small)", "lineHeight": "1.6" @@ -789,29 +739,86 @@ } } }, - "core/query-pagination": { + "sensei-lms/course-categories": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system)", + "textTransform": "uppercase" + } + }, + "sensei-lms/course-navigation": { + "spacing": { + "padding": { + "top": "1rem" + } + }, + "typography": { + "fontFamily": "var(--wp--preset--font-family--system)" + }, + "css": "& .sensei-lms-course-navigation-module__summary { font-family: var(--wp--preset--font-family--system); }" + }, + "sensei-lms/course-overview": { + "css": "& a { text-decoration: underline; }" + }, + "sensei-lms/course-theme-course-progress-bar": { + "color": { + "background": "var(--wp--preset--color--tertiary)" + } + }, + "sensei-lms/course-theme-course-progress-counter": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system)", + "fontSize": "1rem", + "letterSpacing": "0.02em" + } + }, + "sensei-lms/course-theme-lesson-module": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system)", + "letterSpacing": "-0.01em", + "textTransform": "none" + } + }, + "sensei-lms/course-theme-notices": { + "css": "& .sensei-course-theme-quiz-graded-notice__text { font-size: clamp(1.25rem, 1.083rem + 0.556vw, 1.5rem); } & .sensei-course-theme-quiz-graded-notice__reset-quiz-form .sensei-course-theme__button { font-size: clamp(1.313rem, 1.188rem + 0.417vw, 1.5rem); }", "elements": { - "link": { + "h2": { "typography": { - "textDecoration": "none", - "textTransform": "uppercase" + "fontFamily": "var(--wp--preset--font-family--system)", + "fontSize": "clamp(1.5rem, 1.167rem + 1.111vw, 2rem)", + "fontWeight": "590" } } - }, + } + }, + "sensei-lms/course-title": { "typography": { - "fontFamily": "var(--wp--preset--font-family--heading)", - "fontSize": "var(--wp--preset--font-size--medium)", - "letterSpacing": "0.01em" + "fontSize": "clamp(1.5rem, 1.5rem + 0vw, 1.5rem)" } }, - "sensei-lms/quiz-back-to-lesson": { + "sensei-lms/exit-course": { "typography": { - "fontFamily": "var(--wp--preset--font-family--system)" + "fontFamily": "var(--wp--preset--font-family--system)", + "fontSize": "1rem", + "letterSpacing": "0.02em", + "lineHeight": "1" + } + }, + "sensei-lms/page-actions": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--heading)", + "fontSize": "var(--wp--custom--typography--font-sizes--button)", + "letterSpacing": "0.05em", + "lineHeight": "2.666666666666667" } }, "sensei-lms/quiz-actions": { "css": "& .sensei-quiz-actions-secondary .sensei-quiz-action .quiz-submit { font-size: var(--wp--custom--typography--font-sizes--normal); }" }, + "sensei-lms/quiz-back-to-lesson": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--system)" + } + }, "sensei-lms/quiz-question": { "typography": { "fontSize": "var(--wp--preset--font-size--medium)" @@ -886,6 +893,11 @@ "color": { "background": "var(--wp--preset--color--foreground)", "text": "var(--wp--preset--color--background)" + }, + "outline": { + "offset": "1px", + "style": "dashed", + "color": "var(--wp--preset--color--foreground)" } }, ":hover": {