refactor: adjust widget registration and styles

- register and add widget areas to context in same file
- rename widgets/widget areas
- remove widget area titles
- adjust css for sidebar widget area

Author: rise-erpelding

src/php/functions.php

@@ -74,8 +74,6 @@
  */
 function add_to_context( $context ) {
 	$context['menu'] = new \Timber\Menu( 'primary-menu' );
-	$context['primary_sidebar'] = Timber\Timber::get_widgets( 'primary-widget-area' );
-	$context['footer_sidebar'] = Timber\Timber::get_widgets( 'footer-area' );
 	return $context;
 }
 add_filter( 'timber/context', 'add_to_context' );

src/php/inc/theme-widgets.php

@@ -11,26 +11,29 @@
 function sparkpress_theme_widgets_init() {
 	register_sidebar(
 		array(
-			'name'          => 'Primary Widget Area',
-			'id'            => 'primary-widget-area',
-			'description'   => 'Primary sidebar area on the side of the page.',
+			'name'          => 'Primary Sidebar',
+			'id'            => 'primary-sidebar',
+			'description'   => 'Widget for the sidebar area.',
 			'before_widget' => '<div>',
 			'after_widget'  => '</div>',
-			'before_title'  => '<h3>',
-			'after_title'   => '</h3>',
 		)
 	);
 
 	register_sidebar(
 		array(
 			'name'          => 'Footer',
 			'id'            => 'footer-area',
-			'description'   => 'Sidebar for the footer area.',
+			'description'   => 'Widget for the footer area.',
 			'before_widget' => '<div>',
 			'after_widget'  => '</div>',
-			'before_title'  => '<h3>',
-			'after_title'   => '</h3>',
 		)
 	);
 }
 add_action( 'widgets_init', 'sparkpress_theme_widgets_init' );
+
+function sparkpress_add_widgets_to_context( $context ) {
+	$context['sidebar_widget'] = Timber\Timber::get_widgets( 'primary-sidebar' );
+	$context['footer_widget'] = Timber\Timber::get_widgets( 'footer-area' );
+	return $context;
+}
+add_filter( 'timber/context', 'sparkpress_add_widgets_to_context' );

src/php/views/base.twig

@@ -15,9 +15,9 @@
 				Sorry, no content
 			</div>
 		{% endblock %}
-		{% if primary_sidebar %}
+		{% if sidebar_widget %}
 			<aside class="obj-width-limiter cmp-primary-sidebar">
-				{{ primary_sidebar }}
+				{{ sidebar_widget }}
 			</aside>
 		{% endif %}
 	</div>

src/php/views/footer.twig

@@ -12,7 +12,7 @@
 				Privacy Policy
 			</a>
 		</p>
-		{{ footer_sidebar }}
+		{{ footer_widget }}
 	</div>
 </footer>
 

src/scss/components/_post-body.scss

@@ -1,6 +1,7 @@
 .cmp-post-body {
   display: flex;
   flex-direction: column;
+  gap: 1.5rem 3.75rem;
 
   @media (min-width: 50rem) {
     flex-direction: row;

src/scss/components/_primary-sidebar.scss

@@ -1,10 +1,8 @@
 .cmp-primary-sidebar {
   background-color: var(--gray-background-color);
   padding: 1rem;
-  margin-top: 1.5rem;
 
   @media (min-width: 50rem) {
-    margin: 0 0 0 3.75rem;
-    width: 18.75rem;
+    flex-basis: 18.75rem;
   }
 }