Move CSS from style.css to theme.json or block stylesheets

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;
+}

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);
+}

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;
+}

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;
+}

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);
 }

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',