Independent Publisher 3: Add new blockbase child

Automattic · Oct 28, 2021 · 7d5bd21 · 7d5bd21
1 parent b7f14a5
commit 7d5bd21
Show file tree

Hide file tree

Showing 15 changed files with 300 additions and 31 deletions.
diff --git a/blockbase/assets/ponyfill.css b/blockbase/assets/ponyfill.css
diff --git a/blockbase/inc/social-navigation.php b/blockbase/inc/social-navigation.php
@@ -33,7 +33,17 @@ function get_social_menu_as_social_links_block( $block ) {
 	if( ! empty( $block['attrs']['itemsJustification'] ) ) {
 		$class_name .= ' items-justified-' . $block['attrs']['itemsJustification'];
 	}
-	$social_links_content = '<!-- wp:social-links {"iconColor":"primary","iconColorValue":"var(--wp--custom--color--primary)","className":"' . $class_name . '"} --><ul class="wp-block-social-links has-icon-color ' . $class_name . '">';
+
+	// Get color for social icons.
+	$theme_data = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data()->get_raw_data();
+	$social_links_icon_color_value = "var(--wp--custom--color--primary)";
+	$social_links_icon_color = 'primary';
+	if ( array_key_exists( 'styles', $theme_data ) && array_key_exists( 'blocks', $theme_data['styles'] ) && array_key_exists( 'core/social-links', $theme_data['styles']['blocks'] ) && array_key_exists( 'color', $theme_data['styles']['blocks']['core/social-links'] ) && array_key_exists( 'text', $theme_data['styles']['blocks']['core/social-links']['color'] ) ) {
+		$social_links_icon_color_value = $theme_data['styles']['blocks']['core/social-links']['color']['text'];
+		$social_links_icon_color = preg_replace( '/var\(--wp--custom--color--(.+)\)/', '$0 --> $2 $1', $social_links_icon_color_value );
+	}
+
+	$social_links_content = '<!-- wp:social-links {"iconColor":"' . $social_links_icon_color . '","iconColorValue":"' . $social_links_icon_color_value . '","className":"' . $class_name . '"} --><ul class="wp-block-social-links has-icon-color ' . $class_name . '">';
 	$menu = wp_get_nav_menu_items( $social_menu_id );
 	foreach ($menu as $menu_item) {
 		$service_name = preg_replace( '/(-[0-9]+)/', '', $menu_item->post_name );

diff --git a/blockbase/rebuild-child-themes.sh b/blockbase/rebuild-child-themes.sh
@@ -1,6 +1,6 @@
 #!/bin/bash
 
-declare -a ChildThemes=( "geologist" "mayland-blocks" "payton" "quadrat" "russell" "seedlet-blocks" "skatepark" "videomaker" "zoologist" )
+declare -a ChildThemes=( "geologist" "independent-publisher-3", "mayland-blocks" "payton" "quadrat" "russell" "seedlet-blocks" "skatepark" "videomaker" "zoologist" )
 
 for child in ${ChildThemes[@]}; do
 	cd '../'${child}

diff --git a/blockbase/sass/blocks/_navigation.scss b/blockbase/sass/blocks/_navigation.scss
@@ -2,8 +2,12 @@
 .wp-block-navigation {
 	// See https://github.com/WordPress/gutenberg/issues/34648
 	.has-child .wp-block-navigation__submenu-container {
-		background-color: var(--wp--custom--color--background);
-		border: var(--wp--custom--form--border--width) var(--wp--custom--form--border--style) var(--wp--preset--color--primary);
+		background-color: var(--wp--custom--navigation--submenu--color--background);
+		border: var(--wp--custom--navigation--submenu--border--width) var(--wp--custom--navigation--submenu--border--style) var(--wp--custom--navigation--submenu--border--color);
+
+		a {
+			color: var(--wp--custom--navigation--submenu--color--text);
+		}
 	}
 	&.is-responsive {
 		&:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {

diff --git a/blockbase/theme.json b/blockbase/theme.json
@@ -241,6 +241,19 @@
 				"horizontal": "min(30px, 5vw)",
 				"vertical": "min(30px, 5vw)"
 			},
+			"navigation": {
+				"submenu": {
+					"border": {
+						"color": "var(--wp--preset--color--primary)",
+						"radius": "var(--wp--custom--form--border--radius)",
+						"style": "var(--wp--custom--form--border--style)",
+						"width": "var(--wp--custom--form--border--width)"
+					},
+					"color": {
+						"background": "var(--wp--custom--color--background)"
+					}
+				}
+			},
 			"paragraph": {
 				"dropcap": {
 					"margin": ".1em .1em 0 0",

diff --git a/independent-publisher-3/assets/theme.css b/independent-publisher-3/assets/theme.css
@@ -1,2 +1,18 @@
+.wp-block-social-links.is-style-logos-only .wp-social-link svg {
+	width: 1em;
+	height: 1em;
+  }
 
-/*# sourceMappingURL=theme.css.map */
+.wp-block-site-title a:hover {
+	text-decoration: none;
+}
+
+h1 a:hover,
+h2 a:hover,
+h3 a:hover,
+h4 a:hover,
+h5 a:hover,
+h6 a:hover {
+	color: var(--wp--custom--color--foreground);
+	text-decoration: none;
+}
diff --git a/independent-publisher-3/block-template-parts/header.html b/independent-publisher-3/block-template-parts/header.html
@@ -1,9 +1,15 @@
-<!-- wp:group {"style":{"spacing":{"padding":{"top":"47px","bottom":"80px"}}}} -->
-<div class="wp-block-group" style="padding-top:47px;padding-bottom:80px">
+<!-- wp:group {"style":{"spacing":{"padding":{"top":"47px","bottom":"58px"}}}} -->
+<div class="wp-block-group" style="padding-top:47px;padding-bottom:58px">
 	<!-- wp:site-logo {"align":"center","className":"is-style-rounded","width":80} /-->
 	<!-- wp:site-title {"textAlign":"center"} /-->
 	<!-- wp:site-tagline {"textAlign":"center","style":{"spacing":{"margin":{"top":"5px"}}}} /-->
-	<!-- wp:navigation {"itemsJustification":"center","overlayMenu":"never","__unstableLocation":"social"} /-->
+	<!-- wp:spacer {"height":1} -->
+	<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+	<!-- wp:navigation {"itemsJustification":"center","overlayMenu":"never","__unstableSocialLinks":"social"} /-->
+	<!-- wp:spacer {"height":1} -->
+	<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
 	<!-- wp:navigation {"className":"is-style-blockbase-navigation-improved-responsive","itemsJustification":"center","overlayMenu":"mobile","__unstableLocation":"primary"} /-->
 </div>
 <!-- /wp:group -->
diff --git a/independent-publisher-3/block-templates/index.html b/independent-publisher-3/block-templates/index.html
@@ -10,6 +10,9 @@
 	<!-- wp:post-featured-image {"isLink":true} /-->
 	<!-- wp:post-content /-->
 	<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
+	<!-- wp:separator {"color":"tertiary","className":"is-style-wide"} -->
+	<hr class="wp-block-separator has-text-color has-background has-tertiary-background-color has-tertiary-color is-style-wide"/>
+	<!-- /wp:separator -->
 	<!-- wp:spacer {"height":40} -->
 	<div style="height:40px" aria-hidden="true" class="wp-block-spacer"></div>
 	<!-- /wp:spacer -->

diff --git a/independent-publisher-3/block-templates/single.html b/independent-publisher-3/block-templates/single.html
@@ -6,13 +6,20 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:group {"tagName":"main"} -->
+<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
+
+<!-- wp:spacer {"height":1} -->
+<div style="height:1px" aria-hidden="true" class="wp-block-spacer"></div>
+<!-- /wp:spacer -->
+
+<!-- wp:group {"tagName":"main","layout":{"inherit":true}} -->
 <main class="wp-block-group">
 <!-- wp:post-featured-image {"align":"full"} /-->
 
-<!-- wp:post-content {"layout":{"inherit":true}} /-->
+<!-- wp:post-content /-->
+
+<!-- wp:post-author {"showBio":true,"byline":"Published by","className":"is-style-default"} /-->
 
-<!-- wp:template-part {"slug":"post-meta-icons","layout":{"inherit":true}} /-->
 </main>
 <!-- /wp:group -->
 

diff --git a/independent-publisher-3/child-theme.json b/independent-publisher-3/child-theme.json
@@ -34,7 +34,7 @@
 				},
 				{
 					"slug": "tertiary",
-					"color": "#54ac65",
+					"color": "#f2f2f2",
 					"name": "Tertiary"
 				},
 				{
@@ -49,7 +49,40 @@
 				}
 			]
 		},
+		"custom": {
+			"body": {
+				"typography": {
+					"lineHeight": 1.75
+				}
+			},
+			"gap": {
+				"baseline": "10px"
+			},
+			"navigation": {
+				"submenu": {
+					"border": {
+						"width": "0"
+					},
+					"color": {
+						"text": "var(--wp--custom--color--background)",
+						"background": "var(--wp--custom--color--secondary)"
+					}
+				}
+			}
+		},
 		"typography": {
+			"fontFamilies": [
+				{
+					"fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
+					"slug": "system-font",
+					"name": "System Font"
+				},
+				{
+					"fontFamily": "Georgia, \"Times New Roman\", serif",
+					"slug": "serif",
+					"name": "Serif"
+				}
+			],
 			"fontSizes": [
 				{
 					"name": "Small",
@@ -78,22 +111,52 @@
 				}
 			]
 		},
-		"custom": {
-			"gap": {
-				"baseline": "10px"
-			}
-		},
 		"layout": {
 			"contentSize": "740px",
 			"wideSize": "1110px"
 		}
 	},
 	"styles": {
 		"typography": {
-			"fontFamily": "Georgia, \"Times New Roman\", serif"
+			"fontFamily": "var(--wp--preset--font-family--system-font)"
 		},
 		"blocks": {
+			"core/navigation-link": {
+				"color": {
+					"text": "var(--wp--custom--color--secondary)"
+				},
+				"typography": {
+					"fontSize": "17px",
+					"fontWeight": "700"
+				}
+			},
+			"core/post-content": {
+				"typography": {
+					"fontFamily": "var(--wp--preset--font-family--serif)"
+				}
+			},
+			"core/post-date": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var(--wp--custom--color--foreground)"
+						}
+					}
+				}
+			},
+			"core/post-terms": {
+				"elements": {
+					"link": {
+						"color": {
+							"text": "var(--wp--custom--color--foreground)"
+						}
+					}
+				}
+			},
 			"core/post-title": {
+				"color": {
+					"text": "var(--wp--custom--color--primary)"
+				},
 				"elements": {
 					"link": {
 						"color": {
@@ -105,6 +168,15 @@
 					"fontSize": "var(--wp--preset--font-size--huge)"
 				}
 			},
+			"core/quote": {
+				"border": {
+					"color": "var(--wp--custom--color--secondary)",
+					"width": "0 0 0 3px"
+				},
+				"typography": {
+					"fontStyle": "italic"
+				}
+			},
 			"core/site-tagline": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--system-font)",
@@ -122,10 +194,21 @@
 				"typography": {
 					"fontSize": "38px"
 				}
+			},
+			"core/social-links": {
+				"color": {
+					"text": "var(--wp--custom--color--foreground)"
+				},
+				"typography": {
+					"fontSize": "28px"
+				}
 			}
 		},
 		"elements": {
 			"h1": {
+				"color": {
+					"text": "var(--wp--custom--color--primary)"
+				},
 				"elements": {
 					"link": {
 						"color": {
@@ -139,6 +222,9 @@
 				}
 			},
 			"h2": {
+				"color": {
+					"text": "var(--wp--custom--color--primary)"
+				},
 				"elements": {
 					"link": {
 						"color": {
@@ -152,6 +238,9 @@
 				}
 			},
 			"h3": {
+				"color": {
+					"text": "var(--wp--custom--color--primary)"
+				},
 				"elements": {
 					"link": {
 						"color": {
@@ -165,6 +254,9 @@
 				}
 			},
 			"h4": {
+				"color": {
+					"text": "var(--wp--custom--color--primary)"
+				},
 				"elements": {
 					"link": {
 						"color": {
@@ -178,6 +270,9 @@
 				}
 			},
 			"h5": {
+				"color": {
+					"text": "var(--wp--custom--color--primary)"
+				},
 				"elements": {
 					"link": {
 						"color": {
@@ -191,6 +286,9 @@
 				}
 			},
 			"h6": {
+				"color": {
+					"text": "var(--wp--custom--color--primary)"
+				},
 				"elements": {
 					"link": {
 						"color": {

diff --git a/independent-publisher-3/package.json b/independent-publisher-3/package.json
@@ -12,9 +12,8 @@
   },
   "scripts": {
     "start": "chokidar \"**/*.scss\" child-theme.json ../blockbase/theme.json -c \"npm run build\" --initial",
-    "build": "npm run build:theme && npm run build:scss",
-    "build:theme": "node ../blockbase/build.js independent-publisher-3",
-    "build:scss": "node-sass --importer node_modules/node-sass-package-importer/dist/cli.js sass/theme.scss assets/theme.css --output-style expanded --indent-type tab --indent-width 1 --source-map true"
+    "build": "npm run build:theme",
+    "build:theme": "node ../blockbase/build.js independent-publisher-3"
   },
   "author": "",
   "license": "GPLv2"

diff --git a/independent-publisher-3/readme.txt b/independent-publisher-3/readme.txt
@@ -0,0 +1,33 @@
+=== Independent Publisher 3 ===
+Contributors: Automattic
+Requires at least: 5.8
+Tested up to: 5.8
+Requires PHP: 5.7
+License: GPLv2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+== Description ==
+
+Independent Publisher 3 the next iteration of the Independent Publisher themes. As a universal theme, it is ready for Full Site Editing, but can be used in the Classic Dashboard.
+
+Clean and polished, with a light color scheme, bold typography, and full-width images, It’s designed to enhance your content and provide an immersive experience for your readers. With a focus on readability, the content looks crisp and easy on the eyes.
+
+== Changelog ==
+
+= 1.0 =
+* Initial release
+
+== Copyright ==
+
+Independent Publisher 3 WordPress Theme, (C) 2021 Automattic, Inc.
+Independent Publisher 3 is distributed under the terms of the GNU GPL.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 2 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
diff --git a/independent-publisher-3/sass/theme.scss b/independent-publisher-3/sass/theme.scss
diff --git a/independent-publisher-3/screenshot.jpg b/independent-publisher-3/screenshot.jpg