Merge pull request #1097 from WebDevStudios/feature/site-editor-index

Feature/site editor index

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+	"phpsab.standard": "WordPress",
 	"phpsab.executablePathCS": "./vendor/bin/phpcs",
 	"phpsab.executablePathCBF": "./vendor/bin/phpcbf",
 	"editor.formatOnSave": true,

assets/scss/global/_global.scss

@@ -16,3 +16,7 @@ html {
 pre {
 	@apply overflow-auto;
 }
+
+.post-container {
+	@apply mb-6;
+}

assets/scss/template-tags/_comments.scss

@@ -0,0 +1,29 @@
+/* Comments
+--------------------------------------------- */
+
+.comments-area {
+	.comment-list {
+		@apply list-none mb-0 p-0;
+
+		.comment {
+			@apply clear-both;
+		}
+
+		.children {
+			@apply list-none my-4;
+		}
+	}
+
+	.comment-respond {
+		.comment-form {
+			.comment-form-comment {
+				@apply flex flex-col;
+
+				textarea {
+					@apply rounded-md;
+					border: 1px var( --wp--preset--color--primary-300 ) solid;
+				}
+			}
+		}
+	}
+}

assets/scss/template-tags/_forms.scss

@@ -0,0 +1,31 @@
+/* Comments
+--------------------------------------------- */
+button,
+input,
+optgroup,
+select,
+textarea {
+	@apply rounded-md;
+	border: 1px var( --wp--preset--color--primary-300 ) solid;
+	padding-top: 6px;
+	padding-right: 16px;
+	padding-bottom: 6px;
+	padding-left: 16px;
+}
+
+[type='reset'],
+[type='submit'] {
+	background-color: var( --wp--preset--color--tertiary-300 );
+	border-radius: 10px;
+	border-width: 0;
+	border-style: solid;
+	color: var( --wp--preset--color--white );
+	font-family: inherit;
+	font-size: var( --wp--preset--font-size--normal );
+	line-height: 1.435;
+	padding-top: 8px;
+	padding-right: 16px;
+	padding-bottom: 8px;
+	padding-left: 16px;
+	text-decoration: none;
+}

assets/scss/template-tags/index.scss

@@ -2,3 +2,6 @@
 // Template Tag Styles
 // Import partials for functions in template-tags.php.
 //----------------------------------------
+
+@import 'comments';
+@import 'forms';

assets/tailwind-preflight.css

@@ -140,8 +140,6 @@ table {
 
 /*
 1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
 */
 
 button,
@@ -154,8 +152,6 @@ textarea {
 	font-weight: inherit; /* 1 */
 	line-height: inherit; /* 1 */
 	color: inherit; /* 1 */
-	margin: 0; /* 2 */
-	padding: 0; /* 3 */
 }
 
 /*
@@ -169,16 +165,13 @@ select {
 
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
 */
 
 button,
 [type='button'],
 [type='reset'],
 [type='submit'] {
 	-webkit-appearance: button; /* 1 */
-	background-color: transparent; /* 2 */
-	background-image: none; /* 2 */
 }
 
 /*

front-page.php

@@ -16,14 +16,6 @@
 
 			<?php
 			if ( have_posts() ) :
-				if ( is_home() && ! is_front_page() ) :
-					?>
-					<header class="entry-header is-layout-constrained">
-						<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
-					</header>
-
-					<?php
-				endif;
 
 				/* Start the Loop */
 				while ( have_posts() ) :

home.php

@@ -14,17 +14,12 @@
 	<div class="wp-site-blocks">
 		<main id="main" class="<?php echo esc_attr( main_classes( [] ) ); ?>">
 
-			<?php
-			if ( have_posts() ) :
-				if ( is_home() && ! is_front_page() ) :
-					?>
+			<?php if ( have_posts() ) : ?>
 					<header class="entry-header is-layout-constrained has-global-padding">
 						<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
 					</header>
 
-					<?php
-				endif;
-
+				<?php
 				/* Start the Loop */
 				while ( have_posts() ) :
 					the_post();

inc/template-tags/print-numeric-pagination.php

@@ -40,9 +40,11 @@ function print_numeric_pagination( $args = [], $query = null ) {
 	}
 	?>
 
-	<nav class="pagination-container" aria-label="<?php esc_attr_e( 'numeric pagination', 'wd_s' ); ?>">
-		<?php echo paginate_links( $args ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- XSS OK. ?>
-	</nav>
+	<div class="is-layout-constrained has-global-padding">
+		<nav class="pagination-container" aria-label="<?php esc_attr_e( 'numeric pagination', 'wd_s' ); ?>">
+			<?php echo paginate_links( $args ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- XSS OK. ?>
+		</nav>
+	</div>
 
 	<?php
 }

package.json

@@ -23,7 +23,7 @@
 	},
 	"dependencies": {
 		"@wordpress/eslint-plugin": "15.0.0",
-		"@wordpress/scripts": "^26.2.0",
+		"@wordpress/scripts": "^26.13.0",
 		"clean-webpack-plugin": "^4.0.0",
 		"copy-webpack-plugin": "^11.0.0",
 		"cross-env": "^7.0.3",
@@ -32,21 +32,21 @@
 		"eslint-webpack-plugin": "^4.0.1",
 		"imagemin-webpack-plugin": "^2.4.2",
 		"offline-github-changelog": "^3.0.1",
-		"postcss-loader": "^7.2.4",
+		"postcss-loader": "^7.3.3",
 		"postcss-move-props-to-bg-image-query": "^4.0.0",
 		"postcss-preset-env": "^9.1.1",
 		"sass-loader": "^13.2.2",
 		"stylelint-config-prettier": "^9.0.5",
 		"stylelint-webpack-plugin": "^4.1.1",
 		"svg-spritemap-webpack-plugin": "^4.5.0",
 		"svg-transform-loader": "^2.0.13",
-		"tailwindcss": "^3.3.1"
+		"tailwindcss": "^3.3.3"
 	},
 	"devDependencies": {
 		"@evilmartians/lefthook": "^1.4.9",
 		"@wordpress/prettier-config": "^2.14.0",
 		"auto-changelog": "^2.4.0",
-		"autoprefixer": "^10.4.14",
+		"autoprefixer": "^10.4.16",
 		"browser-sync": "^2.29.3",
 		"css-loader": "^6.7.3",
 		"glob": "^10.3.3",

patterns/header.php

@@ -23,7 +23,7 @@
 
 		<!-- wp:column {"verticalAlignment":"center","width":"100%"} -->
 		<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:100%">
-			<!-- wp:navigation {"ref":540,"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"},"style":{"spacing":{"blockGap":"var:preset|spacing|60"}}} /-->
+			<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} /-->
 		</div>
 		<!-- /wp:column -->
 	</div>

single.php

@@ -20,7 +20,13 @@
 
 			get_template_part( 'template-parts/content', get_post_type() );
 
-			the_post_navigation();
+			echo wp_kses_post(
+				get_the_post_navigation(
+					[
+						'class' => 'is-layout-constrained',
+					]
+				)
+			);
 
 			print_comments();
 

template-parts/content-page.php

@@ -21,7 +21,7 @@
 
 		wp_link_pages(
 			[
-				'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'wd_s' ),
+				'before' => '<div class="page-links is-layout-constrained has-global-padding">' . esc_html__( 'Pages:', 'wd_s' ),
 				'after'  => '</div>',
 			]
 		);

template-parts/content.php

@@ -62,7 +62,7 @@
 
 		wp_link_pages(
 			[
-				'before' => '<div class="page-links">' . esc_attr__( 'Pages:', 'wd_s' ),
+				'before' => '<div class="page-links is-layout-constrained has-global-padding">' . esc_attr__( 'Pages:', 'wd_s' ),
 				'after'  => '</div>',
 			]
 		);

templates/index.html

@@ -0,0 +1,10 @@
+<!-- wp:template-part {"slug":"header","theme":"wd_s"} /-->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"blockGap":"var:preset|spacing|50"}},"className":"alignfull","align":"full","layout":{"type":"constrained"}} -->
+	<main class="wp-block-group alignfull">
+		<!-- wp:post-title /-->
+		<!-- wp:post-content /-->
+	</main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","theme":"wd_s","tagName":"footer","area":"footer"} /-->