Update base header and footer

header.php

@@ -11,4 +11,4 @@
 	<div id="page" class="site">
 		<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'wpstarter' ); ?></a>
 		<?php get_template_part('modules/header'); ?>
-		<div id="content" class="site-content">
+		<div id="content" class="site__content">

index.php

@@ -2,8 +2,8 @@
 get_header();
 ?>
 
-	<section id="primary" class="content-area">
-		<main id="main" class="site-main">
+	<section id="primary" class="site__primary">
+		<main id="main" class="site__main">
 
 			<?php
 			if ( have_posts() ) {

modules/footer.php

@@ -1,3 +1,10 @@
+<?php
+$footer_copyright_text = get_theme_mod('footer_copyright_text_setting');
+?>
 <footer id="colophon" class="site-footer">
-	<div class="container footer__container"></div>
+	<div class="container footer__container">
+		<?php if( !empty($footer_copyright_text) ) : ?>
+			<p class="footer__copyright"><?php echo $footer_copyright_text; ?></p>
+		<?php endif; ?>
+	</div>
 </footer>

modules/header.php

@@ -1,3 +1,45 @@
-<header class="header" id="masthead">
-	<div class="container header__container"></div>
+<header class="header" id="masthead" id="masthead">
+	<div class="container header__container">
+		<div class="header__wrapper">
+			<div class="header__block header__block--logo">
+				<?php if ( has_custom_logo() ) : ?>
+					<div class="header__logo"><?php the_custom_logo(); ?></div>
+				<?php endif; ?>
+				<?php $blog_info = get_bloginfo( 'name' ); ?>
+				<?php if ( ! empty( $blog_info ) ) : ?>
+					<?php if ( is_front_page() && is_home() ) : ?>
+						<h1 class="header__title"><a class="header__title-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
+					<?php else : ?>
+						<p class="header__title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
+					<?php endif; ?>
+				<?php endif; ?>
+				<?php
+				$description = get_bloginfo( 'description', 'display' );
+				if ( $description || is_customize_preview() ) :
+					?>
+					<p class="site-description">
+						<?php echo $description; ?>
+					</p>
+				<?php endif; ?>
+			</div>
+			<?php if ( has_nav_menu( 'primary' ) ) : ?>
+				<div class="header__block header__block--navigation">
+					<nav id="site-navigation" class="header__nav" aria-label="<?php esc_attr_e( 'Primary Menu', 'wpstarter' ); ?>">
+						<?php
+						wp_nav_menu(
+							array(
+								'theme_location' => 'primary',
+								'menu_class'     => 'header__menu',
+								'items_wrap'     => '<ul id="%1$s" class="%2$s" tabindex="0">%3$s</ul>',
+							)
+						);
+						?>
+					</nav><!-- #site-navigation -->
+					<button class="header__nav-toggle">
+						<span class="header__nav-icon"></span>
+					</button>
+				</div>
+			<?php endif; ?>
+		</div>
+	</div>
 </header>

src/scss/blocks/README.md

@@ -0,0 +1,7 @@
+# Blocks styling
+
+This folder contains any block override styling. It should be a little adjustment to keep everything working.
+
+## Blocks locations
+
+All blocks are built using  `Multiple Blocks` plugins. We shouldn't add blocks using themes, because when we wish to change a theme, it will break all content in Gutenberg editor.

src/scss/main.scss

@@ -13,6 +13,5 @@ This file loads in frontend and append styling to global modules like Header, Fo
 
 @import 'modules/header';
 @import 'modules/footer';
-@import 'modules/content';
 
 @import 'base/core-block';

src/scss/modules/README.md

@@ -0,0 +1,7 @@
+# Modules
+
+This folder contains only global modules, like:
+
+- Header
+- Footer
+- Sidebar

src/scss/modules/_header.scss

@@ -0,0 +1,4 @@
+.header__wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}