More responsive output of blocks.

app/controllers/Home.php

@@ -6,13 +6,70 @@ use Sober\Controller\Controller;
 
 class Home extends Controller
 {
-    function block_count() {
+    public function blockCount()
+    {
         $c = 0;
-      foreach(['home-block-one', 'home-block-two', 'home-block-three', 'home-block-four', 'home-block-five'] as $block) {
+        foreach ([
+            'home-block-one',
+            'home-block-two',
+            'home-block-three',
+            'home-block-four',
+            'home-block-five'
+        ] as $block) {
             if (is_active_sidebar($block)) {
                 $c++;
             }
         }
         return $c;
     }
+
+    public function home_blocks()
+    {
+        $blocks = [];
+        for ($i = 0; $i < 5; $i++) {
+            if ($i === 0) {
+                if (Home::getNextBlock()) {
+                    $blocks[] = Home::getNextBlock();
+                }
+            } elseif ($i > 0) {
+                if (Home::getNextBlock($blocks[$i - 1])) {
+                    $blocks[] = Home::getNextBlock($blocks[$i - 1]);
+                } else {
+                    break;
+                }
+            }
+        }
+
+        return $blocks;
+    }
+
+    public static function getNextBlock($current_block = null)
+    {
+        switch ($current_block) {
+            case 'home-block-one':
+                $next_block = 'home-block-two';
+                break;
+            case 'home-block-two':
+                $next_block = 'home-block-three';
+                break;
+            case 'home-block-three':
+                $next_block = 'home-block-four';
+                break;
+            case 'home-block-four':
+                $next_block = 'home-block-five';
+                break;
+            case 'home-block-five':
+                $next_block = null;
+                break;
+            default:
+                $next_block = 'home-block-one';
+        }
+        if (! $next_block) {
+            return false;
+        } elseif (is_active_sidebar($next_block)) {
+            return $next_block;
+        } else {
+            Home::getNextBlock($next_block);
+        }
+    }
 }

app/setup.php

@@ -100,6 +100,10 @@ add_action('widgets_init', function () {
         'name'          => __('Home Block Four', 'pressbooks-aldine'),
         'id'            => 'home-block-four'
     ] + $config);
+    register_sidebar([
+        'name'          => __('Home Block Five', 'pressbooks-aldine'),
+        'id'            => 'home-block-five'
+    ] + $config);
 });
 
 /**

dist/assets.json

@@ -10,7 +10,7 @@
   "vendor/fontawesome-webfont.ttf?v=4.7.0": "vendor/fontawesome-webfont_b06871f2.ttf",
   "vendor/fontawesome-webfont.woff2?v=4.7.0": "vendor/fontawesome-webfont_af7ae505.woff2",
   "vendor/fontawesome-webfont.woff?v=4.7.0": "vendor/fontawesome-webfont_fee66e71.woff",
-  "scripts/customizer.js": "scripts/customizer_9ceb9969.js",
-  "styles/main.css": "styles/main_9ceb9969.css",
-  "scripts/main.js": "scripts/main_9ceb9969.js"
+  "scripts/customizer.js": "scripts/customizer_4c93eef7.js",
+  "styles/main.css": "styles/main_4c93eef7.css",
+  "scripts/main.js": "scripts/main_4c93eef7.js"
 }

resources/assets/styles/layouts/_pages.scss

@@ -4,6 +4,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    padding: 0 12.5px;
     width: 100%;
     height: 445px;
     background-color: $white;
@@ -15,6 +16,7 @@
       text-transform: uppercase;
       letter-spacing: 2px;
       line-height: 36px;
+      color: $brand-primary;
       margin: 0;
 
       &::before {
@@ -30,6 +32,7 @@
     p {
       font-size: 16px;
       line-height: 32px;
+      text-align: center;
     }
 
     .inside {
@@ -41,23 +44,41 @@
     width: 100%;
     display: flex;
     flex-direction: column;
-  }
 
-  .block.two {
-    color: $white;
+    .block-2 {
       background: $brand-secondary;
 
+      p,
+      h3 {
+        color: $white;
+      }
+
       h3::before {
         background-color: $white;
       }
     }
+  }
 
-  .block.one,
-  .block.two,
-  .block.three,
-  .block.four,
-  .block.five {
-    padding: 0 12.5px;
+  .main > .block-2,
+  .one-two + .block {
+    background: transparent;
+    border: solid 2px $brand-primary;
+    margin-bottom: 401px;
+
+    &::after {
+      position: absolute;
+      left: 0;
+      top: 1840px;
+      content: "";
+      display: block;
+      width: 100vw;
+      height: 600px;
+      z-index: -1;
+      background: url('../images/banner-two.jpg');
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
   }
 }
 
@@ -94,6 +115,16 @@
     .one-two {
       align-items: center;
     }
+
+    .main > .block-2,
+    .one-two + .block {
+      border: solid 2px $brand-primary;
+      box-shadow: unset;
+
+      &::after {
+        top: 2020px;
+      }
+    }
   }
 }
 
@@ -103,19 +134,29 @@
       width: 1115px;
       height: 494px;
     }
+
+    .main > .block-2,
+    .one-two + .block {
+      &::after {
+        top: 2150px;
+      }
+    }
   }
 }
 
 @media (min-width: $extra-large) {
   .home {
+    .block {
+      width: 1115px;
+      box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
+    }
+
     .one-two {
       flex-direction: row;
       justify-content: space-between;
       width: 1615px;
-    }
 
-    .block.one,
-    .block.two {
+      .block {
         border-radius: 4px;
         width: 775px;
 
@@ -123,14 +164,13 @@
           width: 595px;
         }
       }
-
-    .block.three {
-      width: 100%;
     }
 
-    .block.four {
-      width: 1115px;
-      box-shadow: -3px 5px 4px 2px rgba(135, 135, 135, 0.09);
+    .main > .block-2,
+    .one-two + .block {
+      &::after {
+        top: 1550px;
+      }
     }
   }
 }

resources/views/index.blade.php

@@ -1,48 +1,36 @@
 @extends('layouts.app')
 
 @section('content')
-  @debug('dump')
-  @if(is_active_sidebar('home-block-one') && is_active_sidebar('home-block-two'))
-  <div class="one-two">
-  @endif
-    <div class="block one">
+  @if($block_count < 5)
+    @for($i = 0; $i < $block_count; $i++)
+      <div class="block block-{{ $i + 1 }}">
         <div class="inside">
-      @if(is_active_sidebar('home-block-one'))
-        @php(dynamic_sidebar('home-block-one'))
-      @else
-        <h3>{{ __('About Pressbooks', 'pressbooks-aldine')}}</h3>
-        <p>{{ __('Pressbooks is easy-to-use book writing software that lets you create a book in all the formats you need to publish.', 'pressbooks-aldine')}}</p>
-      @endif
+          @php(dynamic_sidebar($home_blocks[$i]))
         </div>
       </div>
-    @if(is_active_sidebar('home-block-two'))
-      <div class="block two">
+    @endfor
+  @elseif($block_count === 5)
+    <div class="one-two">
+      @for($i = 0; $i < 2; $i++)
+        <div class="block block-{{ $i + 1 }}">
           <div class="inside">
-        @php(dynamic_sidebar('home-block-two'))
+            @php(dynamic_sidebar($home_blocks[$i]))
           </div>
         </div>
-    @endif
-  @if(is_active_sidebar('home-block-one') && is_active_sidebar('home-block-two'))
+      @endfor
     </div>
-  @endif
-  @if(is_active_sidebar('home-block-three'))
-  <div class="block three">
+    @for($i = 2; $i < $block_count; $i++)
+      <div class="block block-{{ $i + 1 }}">
         <div class="inside">
-    @php(dynamic_sidebar('home-block-three'))
+          @php(dynamic_sidebar($home_blocks[$i]))
         </div>
       </div>
-  @endif
-  @if(is_active_sidebar('home-block-four'))
-  <div class="block four">
-    <div class="inside">
-    @php(dynamic_sidebar('home-block-four'))
-    </div>
-  </div>
-  @endif
-  @if(is_active_sidebar('home-block-five'))
-  <div class="block five">
+    @endfor
+  @else
+    <div class="block block-1">
       <div class="inside">
-    @php(dynamic_sidebar('home-block-five'))
+        <h3>{{ __('About Pressbooks', 'pressbooks-aldine')}}</h3>
+        <p>{{ __('Pressbooks is easy-to-use book writing software that lets you create a book in all the formats you need to publish.', 'pressbooks-aldine')}}</p>
       </div>
     </div>
   @endif