Browse Source

Blockbase: Add more issues that need to be resolved to remove CSS (#5587)

Ben Dwyer 3 years ago
parent
commit
972d9b0ce9

+ 5 - 0
blockbase/sass/blocks/_calendar.scss

@@ -1,12 +1,17 @@
+// See https://github.com/WordPress/gutenberg/issues/39053
 .wp-block-calendar {
+
 	table {
+
 		caption {
 			color: var(--wp--custom--color--primary);
 		}
+
 		th {
 			background-color: var(--wp--custom--color--tertiary);
 			border-color: var(--wp--custom--color--tertiary);
 		}
+
 		td {
 			color: var(--wp--custom--color--primary);
 			border-color: var(--wp--custom--color--tertiary);

+ 28 - 7
blockbase/sass/blocks/_navigation.scss

@@ -1,4 +1,4 @@
-// See https://github.com/WordPress/gutenberg/issues/34648
+// See https://github.com/WordPress/gutenberg/issues/39052
 .wp-block-navigation {
 	// See https://github.com/WordPress/gutenberg/issues/34648
 	.has-child .wp-block-navigation__submenu-container {
@@ -9,18 +9,22 @@
 			color: var(--wp--custom--navigation--submenu--color--text);
 		}
 	}
+
 	&.is-responsive {
+
 		&:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
 			background-color: var(--wp--custom--color--background);
 			color: var(--wp--custom--color--foreground);
 			padding-left: var(--wp--custom--gap--horizontal);
 			padding-right: var(--wp--custom--gap--horizontal);
 		}
+
 		ul.wp-block-social-links {
 			margin: 0;
 			gap: var(--wp--custom--gap--baseline);
 		}
-		.wp-block-navigation__responsive-container-close{
+
+		.wp-block-navigation__responsive-container-close {
 			right: var(--wp--custom--gap--horizontal);
 			top: var(--wp--custom--gap--vertical);
 		}
@@ -64,6 +68,7 @@
 
 /* Additional styling for header-minimal */
 .wp-block-navigation.blockbase-responsive-navigation-minimal {
+
 	&.is-responsive .is-menu-open.wp-block-navigation__responsive-container {
 		font-size: var(--wp--preset--font-size--large);
 		font-weight: 200;
@@ -77,8 +82,9 @@
 			margin: 0 auto;
 			max-width: 800px; // This should match the content width
 			flex-wrap: nowrap;
+
 			.wp-block-navigation-item {
-				row-gap: 0rem;
+				row-gap: 0;
 
 				> a:hover {
 					text-decoration-line: underline;
@@ -88,13 +94,15 @@
 					text-decoration: underline;
 				}
 			}
-			.wp-block-navigation__container{
+
+			.wp-block-navigation__container {
 				flex-grow: 1;
 				justify-content: center;
 			}
 		}
+
 		ul.wp-block-social-links {
-			padding-bottom: calc( var(--wp--custom--gap--vertical) * 2 );
+			padding-bottom: calc(var(--wp--custom--gap--vertical) * 2);
 		}
 
 		.wp-block-navigation__responsive-container-content .has-child { // Needed for specificity to beat the navigation block CSS
@@ -107,17 +115,22 @@
 
 /* Additional Styling for header-linear */
 .wp-block-navigation.blockbase-responsive-navigation-linear {
+
 	.wp-block-navigation-link a:hover {
 		background: transparent;
 	}
+
 	.wp-block-pages-list__item .wp-block-pages-list__item__link,
 	.wp-block-navigation-link__content {
 		color: var(--wp--custom--color--foreground);
+
 		&:hover {
 			text-decoration: underline;
 		}
 	}
+
 	&:not(.has-background) {
+
 		.wp-block-navigation__submenu-container {
 			background-color: var(--wp--custom--color--background);
 			border-color: var(--wp--custom--color--tertiary);
@@ -130,22 +143,28 @@
 
 	&.is-responsive .wp-block-navigation__responsive-container.is-menu-open {
 		background-color: var(--wp--custom--color--tertiary);
+
 		&.has-modal-open {
+
 			.wp-block-pages-list__item,
 			.wp-block-navigation-item {
 				font-size: var(--wp--custom--font-sizes--normal);
 				line-height: 50px;
 				margin: 0;
 				align-items: flex-end;
+
 				&.has-child {
+
 					.wp-block-pages-list__item__link,
 					.wp-block-navigation-link__content {
 						margin-right: 0;
 					}
-					.wp-block-navigation__submenu-container{
+
+					.wp-block-navigation__submenu-container {
 						gap: 0;
 						padding: 0 19px 0 0;
 						border-right: 1px solid var(--wp--custom--color--foreground);
+
 						.wp-block-pages-list__item__link,
 						.wp-block-navigation-item__content {
 							padding: 0;
@@ -159,13 +178,15 @@
 			.wp-block-navigation__container {
 				align-items: flex-end;
 			}
+
 			.wp-block-navigation__responsive-container-content {
 				flex-direction: row-reverse;
 			}
 
 		}
+
 		.wp-block-social-links {
-			flex-direction:column;
+			flex-direction: column;
 		}
 	}
 }

+ 3 - 1
blockbase/sass/blocks/_paragraph.scss

@@ -1,5 +1,7 @@
+// Needed until https://github.com/WordPress/gutenberg/issues/36122 is fixed
 p {
-	&.has-drop-cap:not(:focus):first-letter {
+
+	&.has-drop-cap:not(:focus)::first-letter {
 		font-size: var(--wp--custom--paragraph--dropcap--typography--font-size);
 		font-weight: var(--wp--custom--paragraph--dropcap--typography--font-weight);
 		margin: var(--wp--custom--paragraph--dropcap--margin);