Adjust scoping behavior of implementation / adaptation of Every Layou…

…t's Sidebar template. Their generic CSS declarations * > * > * work when you have more control of the sibling elements. Additional CSS styles in the target flex classes were breaking layout. Added more specific class setting so that main flex aligned elements can use the sidebar example but ignore non rendering divs that accommodate other design elements. This implementation of Every Layout was an experiment to see what the weak points are in applying newer, lighter CSS frameworks. #alwayslearning. We can add a class on everylayout experimental implementations so it's clear what their source and purpose is.
cagov · Jun 23, 2021 · ec6457d · ec6457d
1 parent 7408942
commit ec6457d
Show file tree

Hide file tree

Showing 9 changed files with 58 additions and 64 deletions.
diff --git a/includes/class-ca-design-system-gutenberg-blocks-templates.php b/includes/class-ca-design-system-gutenberg-blocks-templates.php
@@ -236,20 +236,22 @@ public function register_plugin_templates_page($theme_templates)
     public function add_template_filter($template)
     {
         global $post;
-        $user_selected_template = get_page_template_slug($post->ID);
-        $file_name = pathinfo($user_selected_template, PATHINFO_BASENAME);
-        $template_dir = $this->template_dir;
-        $is_plugin = false;
-        if (file_exists($template_dir . $file_name)) {
-            $is_plugin = true;
-        }
+        if (isset($post->ID)) {
+            $user_selected_template = get_page_template_slug($post->ID);
+            $file_name = pathinfo($user_selected_template, PATHINFO_BASENAME);
+            $template_dir = $this->template_dir;
+            $is_plugin = false;
+            if (file_exists($template_dir . $file_name)) {
+                $is_plugin = true;
+            }
 
-        if ($user_selected_template != '' and $is_plugin) {
-            $template = $user_selected_template;
+            if ($user_selected_template != '' and $is_plugin) {
+                $template = $user_selected_template;
+            }
         }
 
         if (is_category()) {
-            $template = $this->template_dir . 'category-template.php';
+            $template = $this->template_dir . 'plugin/category-template.php';
         }
 
         return $template;

diff --git a/includes/templates/category-template.php → ...es/templates/plugin/category-template.php b/includes/templates/category-template.php → ...es/templates/plugin/category-template.php
diff --git a/includes/templates/template-page-landing.php b/includes/templates/template-page-landing.php
@@ -1,6 +1,6 @@
 <?php
 /*
- * Template Name: Landing Page
+ * Template Name: DS Landing Page
  * Template Post Type: page
  */
 ?>

diff --git a/includes/templates/template-page-single-column.php b/includes/templates/template-page-single-column.php
@@ -1,6 +1,6 @@
 <?php
 /*
- * Template Name: Single Column Page
+ * Template Name: DS Single Column Page
  * Template Post Type: page
  */
 ?>

diff --git a/includes/templates/template-page.php b/includes/templates/template-page.php
@@ -1,11 +1,10 @@
 <?php
 /*
- * Template Name: Page
+ * Template Name: DS Page
  * Template Post Type: page
  */
 ?>
 
-
 <?php
 // Pull header file from theme if it exists.
 if (file_exists(get_stylesheet_directory() . '/header.php')) {
@@ -33,13 +32,13 @@
         </div>
 
 
-        <div class="sidebar-container" style="z-index: 1;">
+        <div class="sidebar-container everylayout" style="z-index: 1;">
             <sidebar space="0" side="left">
                 <cagov-content-navigation data-selector="main" data-type="wordpress" data-label="On this page"></cagov-content-navigation>
             </sidebar>
         </div>
 
-        <div>
+        <div class="everylayout">
             <main class="main-primary">
                 <?php
                 while (have_posts()) :

diff --git a/includes/templates/template-single-event.php b/includes/templates/template-single-event.php
@@ -1,6 +1,6 @@
 <?php
 /*
- * Template Name: Event
+ * Template Name: DS Event
  * Template Post Type: post
  */
 ?>
@@ -50,7 +50,7 @@ function cagov_event_schema($post)
     // $meta = get_post_meta($post->ID);
     //     print_r($meta['_wp_page_template'][0]);
 
-        // Array ( [_edit_lock] => Array ( [0] => 1623916193:1 ) [ca_custom_initial_state] => Array ( [0] => 1 ) [ca_default_navigation_menu] => Array ( [0] => dropdown ) [_edit_last] => Array ( [0] => 1 ) [ca_custom_post_title_display] => Array ( [0] => on ) [_wp_page_template] => Array ( [0] => /Users/chachasikes/Work/ca.gov/wordpress/wordpress/wp-content/plugins/ca-design-system-gutenberg-blocks/includes/templates/template-single-event.php ) [_pingme] => Array ( [0] => 1 ) [_encloseme] => Array ( [0] => 1 ) )
+    // Array ( [_edit_lock] => Array ( [0] => 1623916193:1 ) [ca_custom_initial_state] => Array ( [0] => 1 ) [ca_default_navigation_menu] => Array ( [0] => dropdown ) [_edit_last] => Array ( [0] => 1 ) [ca_custom_post_title_display] => Array ( [0] => on ) [_wp_page_template] => Array ( [0] => /Users/chachasikes/Work/ca.gov/wordpress/wordpress/wp-content/plugins/ca-design-system-gutenberg-blocks/includes/templates/template-single-event.php ) [_pingme] => Array ( [0] => 1 ) [_encloseme] => Array ( [0] => 1 ) )
 
     $blocks = parse_blocks($post->post_content);
     $start_date = "";
@@ -86,7 +86,7 @@ function cagov_event_schema($post)
     }
     //</script>
     EOT;
-    
+
     // "organizer": "$organizer",
     // "offers": "$offers",
     // "location": "$location",
@@ -175,40 +175,39 @@ function cagov_event_schema($post)
 <div id="page-container" class="page-container-ds">
 
     <?php
-        do_action("cagov_breadcrumb");
+    do_action("cagov_breadcrumb");
     ?>
 
     <div id="main-content" class="main-content-ds single-column" tabindex="-1">
         <div>
             <main class="main-primary">
-                <div>
-                    <?php
-                    while (have_posts()) :
-                        the_post();
-                    ?>
-                        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
-                            <category-label><?php the_category(); ?></category-label>
-                            <!-- Page Title-->
-                            <?php
-                            if ('on' === get_post_meta($post->ID, 'ca_custom_post_title_display', true)) {
-                                $caweb_padding = get_option('ca_default_post_date_display') ? ' pb-0' : '';
-                                esc_html(the_title(sprintf('<h1 class="page-title%1$s">', $caweb_padding), '</h1>'));
-                            }
-                            print '<div class="entry-content">';
-
-                            the_content();
-
-                            // if (get_option('ca_default_post_date_display') && !$caweb_is_page_builder_used) {
-                            printf('<p class="page-date">Published <time datetime="%1$s">%1$s</time></p>', get_the_date('M d, Y'));
-                            // }
-                            print '</div>';
-                            ?>
-                        </article>
-
-                        <?php echo cagov_event_schema($post) ?>
-
-                    <?php endwhile; ?>
-                    <span class="return-top hidden-print"></span>
+                <?php
+                while (have_posts()) :
+                    the_post();
+                ?>
+                    <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
+                        <category-label><?php the_category(); ?></category-label>
+                        <!-- Page Title-->
+                        <?php
+                        if ('on' === get_post_meta($post->ID, 'ca_custom_post_title_display', true)) {
+                            $caweb_padding = get_option('ca_default_post_date_display') ? ' pb-0' : '';
+                            esc_html(the_title(sprintf('<h1 class="page-title%1$s">', $caweb_padding), '</h1>'));
+                        }
+                        print '<div class="entry-content">';
+
+                        the_content();
+
+                        // if (get_option('ca_default_post_date_display') && !$caweb_is_page_builder_used) {
+                        printf('<p class="page-date">Published <time datetime="%1$s">%1$s</time></p>', get_the_date('M d, Y'));
+                        // }
+                        print '</div>';
+                        ?>
+                    </article>
+
+                    <?php echo cagov_event_schema($post) ?>
+
+                <?php endwhile; ?>
+                <span class="return-top hidden-print"></span>
 
             </main>
 
@@ -219,7 +218,7 @@ function cagov_event_schema($post)
 </div>
 
 <?php
-    do_action("cagov_content_menu");
+do_action("cagov_content_menu");
 ?>
 
 <?php get_footer(); ?>
diff --git a/includes/templates/template-single-press-release.php b/includes/templates/template-single-press-release.php
@@ -1,6 +1,6 @@
 <?php
 /*
- * Template Name: Announcement
+ * Template Name: DS Press Release
  * Template Post Type: post
  */
 ?>
@@ -23,12 +23,9 @@
     ?>
 
     <div id="main-content" class="main-content-ds single-column" tabindex="-1">
-        <div>
+         <div class="everylayout">
             <main class="main-primary">
-
-
                 <div>
-
                     <?php
                     while (have_posts()) :
                         the_post();

diff --git a/includes/templates/template-single.php b/includes/templates/template-single.php
@@ -1,6 +1,6 @@
 <?php
 /*
- * Template Name: Announcement
+ * Template Name: DS Announcement
  * Template Post Type: post
  */
 ?>
@@ -25,10 +25,7 @@
     <div id="main-content" class="main-content-ds single-column" tabindex="-1">
         <div>
             <main class="main-primary">
-
-
                 <div>
-
                     <?php
                     while (have_posts()) :
                         the_post();

diff --git a/styles/page.css b/styles/page.css
@@ -16,7 +16,6 @@
 
 */
 
-
 /* PAGE CONTAINER */
 /* Design system page container */
 
@@ -57,6 +56,7 @@
 .sidebar-container {
     display: block;
     width: 276px;
+    max-width: 276px;
 }
 
 .with-sidebar .main-content-default,
@@ -67,28 +67,28 @@
 }
 
 .with-sidebar.has-sidebar-left .main-content-default > *,
-.with-sidebar.has-sidebar-left>*>* {
+.with-sidebar.has-sidebar-left .main-content-ds > .everylayout {
     margin: calc(var(--s1) / 2);
     flex-basis: 267px;
     flex-grow: 1;
 }
 
 .with-sidebar.has-sidebar-left .main-content-default > :last-child,
-.with-sidebar.has-sidebar-left>*> :last-child {
+.with-sidebar.has-sidebar-left .main-content-ds > .everylayout:last-child {
     flex-basis: 0;
     flex-grow: 999;
     min-width: calc(50% - var(--s1));
 }
 
 .with-sidebar.has-sidebar-right .main-content-default,
-.with-sidebar.has-sidebar-right>*>* {
+.with-sidebar.has-sidebar-right .main-content-ds  > .everylayout {
     flex-basis: 0;
     flex-grow: 999;
     min-width: calc(50% - var(--s1));
 }
 
 .with-sidebar.has-sidebar-right .main-content-default > * > :last-child,
-.with-sidebar.has-sidebar-right>*> :last-child {
+.with-sidebar.has-sidebar-right .main-content-ds > :last-child {
     margin: calc(var(--s1) / 2);
     flex-basis: 267px;
     flex-grow: 1;
@@ -154,7 +154,7 @@ category-label a {
 }
 
 .with-sidebar.page-container-ds .breadcrumb {
-    margin-bottom: 64px;
+    margin-bottom: 32px;
 }
 
 .with-sidebar.page-container-ds.has-sidebar-left main {