Fix: Widget formatting #120
Conversation
src/php/index.php
Outdated
| @@ -24,6 +24,8 @@ | |||
| $templates = array( 'index.twig' ); | |||
| if ( is_home() && ! is_front_page() ) { | |||
| $context['title'] = single_post_title(); | |||
| } elseif ( ! $context['posts']->found_posts ) { | |||
| $context['title'] = 'Nothing found'; | |||
There was a problem hiding this comment.
Is this necessary since the 404.twig template hard-codes "Nothing found" in its h1?
There was a problem hiding this comment.
This replaces the "Nothing Found" text that was removed in content-none.twig, which we include in the 404.twig template, but also in index.twig. It shows up if you have no posts, which is an edge case for sure. Leaving it off, it shows the text "Recent Posts" which isn't exactly accurate, but again, it's an edge case that would only occur if you didn't have posts, which isn't what people generally use WordPress for, so we could clip it out of here. I realized the capitalization for this didn't match all the others so updated it in ac7e974.
| {{ function('get_search_form') }} | ||
| </div> | ||
| </section> | ||
| <div class="util-full-width"> |
There was a problem hiding this comment.
Instead of having a class for util-full-width, it might make more sense to apply margin-inline-start: auto to .cmp-primary-sidebar. This should push it to the right side of the page without requiring any interventions in the main content area.
There was a problem hiding this comment.
🤯 The property I never knew I needed. Thanks!
| @@ -1,6 +1,7 @@ | |||
| .cmp-primary-sidebar { | |||
| background-color: var(--gray-background-color); | |||
| padding: 1rem; | |||
| margin-inline-start: auto; | |||
|
|
|||
| @media (min-width: 50rem) { | |||
| flex-basis: 18.75rem; | |||
There was a problem hiding this comment.
One last thing, with certain types of content in the sidebar, it can get squished down pretty small, so I'd recommend adding flex-shrink: 0 in addition to the flex-basis on wider screens.
There was a problem hiding this comment.
Inside the media query like this? db6df75
Also moving that margin-inline-start inside the mq because we don't want the sidebar scooted over for small screens.
- use title block for h1 elements to consistently position sidebar - add documentation for widgets - adjust positioning for 404 page and other pages where flex-sibling doesn't occupy full width
Fixes a bug from the featured image work that checks to see if there is an image first before adding an image tag to the document.
rise-erpelding
force-pushed
the
widget-formatting
branch
from
db6df75 to
2826c6a
Compare
Description
This PR makes some changes to the markup around the content block in order to resolve a bug that prevented the
.obj-width-limiterclass from centering/spacing content on the page appropriately when the sidebar widget is active. It also refactors howh1tags are added to the page, in order to push the sidebar below theh1for all pages.Finally, this PR also adds a minor fix to prevent empty
imgtags from showing on the post page if there is no featured image added.Closes #119
To Validate
npm startmain):1.5remof space after theh1because theh1is now in a container, unless someone has strong opinions about fixing it, I'm going to leave it to be fixed in the context of a project)h1, header, and footer on the left side. Sidebar should appear in the same place on every page.Footnotes
Fun fact: I learned today that you can deactivate the sidebar (or any) widgets but keep them around to bring them back easily by going to the list view in the widgets admin, and dragging the widgets in the sidebar area to the Inactive widgets area (shift-select or command-A to grab all widgets). I wrote about this in the documentation because it’s not obvious and prior to this I was wiping my database every time I wanted to take the widgets out, but it’s worth mentioning here for easier validation. ↩