made the test/default blog post 3 by default #2670

lougoncharenko · 2023-05-24T18:32:04Z

PR Summary:

The default state for the blog posts section is now 3 cards

Why are these changes introduced?

refrences #2667 .

What approach did you take?

I added a div section called blog container that includes 3 default blog-placeholders. This blog container and placeholders load if a blog is not selected or is removed.

Visual impact on existing themes

This will not affect existing themes as this is a default setting

Testing steps/scenarios

Test different types of blogs
Remove blogs to view default
Change size of screen to test for responsiveness
Apply color scheme to test that nothing is broken.

Demo links

Editor
Store

Checklist

Added PR summary for release notes
Requested review from UX (Only for changes that are affecting the experience or perceivable visual details)
Created a ticket for the help.shopify.com documentation team about updates to theme settings. (Internal-only task)
Followed theme code principles
Linted with Theme Check
Tested on mobile
Tested on multiple browsers
Tested for accessibility

eugenekasimov

Hey Louisa, this PR might be a bit complicated that it could look at first glance, but no worries :)

I left a comment about css and it's easy to fix. My main concern is since we have three placeholders now, should we add a slider to them as something that happens with real blog posts? 🤔

Here is a video to better understand what I mean. https://screenshot.click/24-09-bpf5w-23602.mp4
cc: @kmeleta @Oliviammarcello

assets/section-featured-blog.css

sections/featured-blog.liquid

… snippet for blog-placeholder that renders into featured-blog with changable arguments

sections/featured-blog.liquid

assets/section-featured-blog.css

… presets

kmeleta

Thanks Louisa! Did quick first pass on code and had some comments/suggestions so leaving some initial feedback.

sections/featured-blog.liquid

assets/section-featured-blog.css

kimberlyoleiro · 2023-05-30T19:59:14Z

@lougoncharenko This is looking great so far! Thank you for taking a detailed approach and safeguarding against any setting that could be pre-set.

I noticed some funky things happening with the bottom padding of the blog sections. Not sure if it's related to this work or not, but could you please double check?

eugenekasimov · 2023-05-30T20:30:55Z

I noticed some funky things happening with the bottom padding of the blog sections. Not sure if it's related to this work or not, but could you please double check?

Hey @kimberlyoleiro, I notice this thing too, but I'm afraid it's not related to this PR. We have the similar issue with other sections, (i.e image banner) and this happens only until you don't save. It seems that it came after animation. I know it's not proper behaviour though.

YoannJailin · 2023-05-31T13:53:35Z

@lougoncharenko hey, most of the sections have a heading with a Medium size (Featured collection, Collection list, Collage, Multicolumn, Collapsible content...) when you add them in the page. Personnally, i am in favor in keeping the medium default size for Blog Posts heading. Everything else seems good to me!

…e changes as suggested

…pplied

eugenekasimov

Hey Louisa, the PR looks really good. It's very close to be finished 🙂. I left a minor feedback about

.blog {
  padding-bottom: 3rem;
}

I also want to flag my concern to @YoannJailin about margin for tablet layout. So far, the Blog posts section's margin is:

5 rem for desktop (matches other sections)
1.5 rem for tablet (doesn't match other sections)
1.5 rem for mobile (matches other sections)

It's not something we changed in this PR and we actually had this before but it just doesn't look right to me and we can easily fix it here.

assets/section-featured-blog.css

Oliviammarcello · 2023-06-05T18:07:45Z

Looking good, I just noticed a few small details as well.

The date and author should not show in the empty states. Screenshot
The space between the blog posts and the title is larger than other sections. Screenshot | Example

eugenekasimov · 2023-06-05T21:06:13Z

I also want to flag my concern to @YoannJailin about margin for tablet layout. So far, the Blog posts section's margin is:

5 rem for desktop (matches other sections)

1.5 rem for tablet (doesn't match other sections)

1.5 rem for mobile (matches other sections)

It's not something we changed in this PR and we actually had this before but it just doesn't look right to me and we can easily fix it here.

Hey Louisa. I talked to Olivia about this 👆, so let's leave it as is for now since there is the same pattern in behaviour in a few other sections.

lougoncharenko · 2023-06-06T14:34:15Z

@Oliviammarcello , I went ahead and removed the date and author presets for the default
I noticed the spacing between the title and blog posts only occurs in the preview section but adjusts once you save it, I believe this is a bug that occurs in blog posts (same thing we noticed with the color scheme). This bug might be outside of the scope of this PR. I included a video for more details

Screen.Recording.2023-06-06.at.10.30.09.AM.mov

eugenekasimov

I merged our release branch into this PR locally and tested.

I can confirm that those issues with padding-bottom while changing a color scheme and space between title and the container in the editor are gone 👌.

Oliviammarcello · 2023-06-06T17:25:00Z

I merged our release branch into this PR locally and tested.

I can confirm that those issues with padding-bottom while changing a color scheme and space between title and the container in the editor are gone 👌.

Amazing! Once we refactor to check that the right placeholder images are used I can approve if that works

* added vertical padding and made l2 bold to mega menu * added vertical padding to drop down * fixed default UI for dropdown and mega menu * added hover effect to all l2 links and fixed overlapping or mega menu * adding padding to l3 links and fixed hover effect for dropdown * reverted the mega menu back to the current setting * changed horizontal grid gap on mega menu and vertical paddings on dropdown menu * made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container * removed the unnecessary lines of code * removed the text-thickness that was making l2/l3 links a different size from l1 links * added a hover effect over active link * removed uneccessary link size and white space

* Fix color for image in password (#2608) * [Image behavior] fixed background jitter fix on mobile (#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (#2621) * Update reverse scheme (#2626) * [Footer] Remove Global Media settings inheritance from images (#2631) * Send timezone offset as string instead of integer (#2636) * Fix slider scrolling issue (#2635) * Fix background gradient for Related Products. (#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (#2657) * Add default values for color scheme group (#2660) * Revert unwanted changes (#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <[email protected]> * Gradient fix for transparent background medias and cards (#2651) * Fix media, product, and collection cards placeholder (#2682) * Fix missing else for collection cards (#2692) --------- Co-authored-by: Sofia Matulis <[email protected]> Co-authored-by: Eugene Kasimov <[email protected]> Co-authored-by: Mateusz Krzeszowiak <[email protected]> Co-authored-by: Lucas Lacerda <[email protected]> Co-authored-by: Kjell Reigstad <[email protected]> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <[email protected]> Co-authored-by: Andrew Etchen <[email protected]>

…edit with presets

eugenekasimov

Looks good to me 👍

kmeleta

I suspect we'll need more significant refactor to account for theme styles in here eventually, but this definitely accomplishes what we need for now. Nice work!

sections/featured-blog.liquid

assets/section-featured-blog.css

andrewetchen

Everything looks great! Thanks for adding these changes, @lougoncharenko

Just including some feedback on the placeholder assign and as per our internal Slack convo about [Option 2]

Oliviammarcello · 2023-06-08T15:45:07Z

Just sharing here some notes Louisa and I talked about in slack:

The blog post default state images are taller than they appear once a real blog is added. Current | Ideal
Update the text margin from 2rem to 1rem so the default text appears visually centered. Before | After
The global theme settings aren't being applied to the blog post default states

Feel free to separate these into a new PR if needed. Thank you!

sections/featured-blog.liquid

…log default instead of news

kmeleta

Looks great, just one question before I approve.

kmeleta · 2023-06-21T14:44:37Z

sections/featured-blog.liquid

@@ -265,7 +281,7 @@
    {
      "name": "t:sections.featured-blog.presets.name",
      "settings": {
-        "blog": "News"
+        "blog": "test"


Is there a reason we opted to use a fake, or I guess an empty blog here instead of just removing the setting preset altogether?

* made the test/default blog post 3 by default * blog default posts are not mobile responsive and on a slider. created snippet for blog-placeholder that renders into featured-blog with changable arguments * removed commented out code * default blog posts now are modifiable by post-limit and column number presets * reformated code, reverted header back to h1, removed snippet, and made changes as suggested * noticed the blog section needs a margin bottom when color scheme is applied * removed padding from blog and removed date and author presets * Fix link formatting in Related Products heading (Shopify#2680) * fix default UI for dropdown and mega menu (Shopify#2644) * added vertical padding and made l2 bold to mega menu * added vertical padding to drop down * fixed default UI for dropdown and mega menu * added hover effect to all l2 links and fixed overlapping or mega menu * adding padding to l3 links and fixed hover effect for dropdown * reverted the mega menu back to the current setting * changed horizontal grid gap on mega menu and vertical paddings on dropdown menu * made vertical grid gap at 1.8 rem to match the 3 rem vertical paddings on mega-menu container * removed the unnecessary lines of code * removed the text-thickness that was making l2/l3 links a different size from l1 links * added a hover effect over active link * removed uneccessary link size and white space * Add release/v10.0.0 branch fixes to main (Shopify#2693) * Fix color for image in password (Shopify#2608) * [Image behavior] fixed background jitter fix on mobile (Shopify#2611) * [Animation in editor] Remove transform translate when re rendering and re ordering blocks (Shopify#2614) * Remove transform translate when re rendering and re ordering blocks * target only what's needed * [bug] Horizontal scrolling on mobile. (Shopify#2617) * Add overflow-x:hidden to prevent horizontal scrolling on mobile. * Change margin for slider for mobile and tablet. * Remove redundant preconnect to cdn.shopify.com (Shopify#2621) * Update reverse scheme (Shopify#2626) * [Footer] Remove Global Media settings inheritance from images (Shopify#2631) * Send timezone offset as string instead of integer (Shopify#2636) * Fix slider scrolling issue (Shopify#2635) * Fix background gradient for Related Products. (Shopify#2641) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Quick add remove animation from image and content (Shopify#2657) * Add default values for color scheme group (Shopify#2660) * Revert unwanted changes (Shopify#2669) * Update from Shopify for theme dawn/release/10.0.0 Committed from shop: Skeleton Theme * Revert "Update from Shopify for theme dawn/release/10.0.0" This reverts commit 89d927e. * Remove forced white text color in Image Banner & Slideshow (Shopify#2663) * Remove forced white color. * Change color scheme for Dawn's default homepage Image Banner.. * Remove warning about color scheme usage. * Fix bug with transparent buttons on mobile. * Remove unused info key from translated files. * Update display of button when it's in a mobile container. * Update existing placeholder images (Shopify#2610) * Update existing placeholder images * Featured collection and product card * Featured product section * Collection list section * Featured blog and multirow sections * Slideshow: change order of placeholder images * Collage adjustments for product and collection cards * Image with text adjustments * Featured product: re-add `.product--no-media` selectors * Update featured product section * Update `card-collection` * Cleanup `card-collection` --------- Co-authored-by: Ludo <[email protected]> * Gradient fix for transparent background medias and cards (Shopify#2651) * Fix media, product, and collection cards placeholder (Shopify#2682) * Fix missing else for collection cards (Shopify#2692) --------- Co-authored-by: Sofia Matulis <[email protected]> Co-authored-by: Eugene Kasimov <[email protected]> Co-authored-by: Mateusz Krzeszowiak <[email protected]> Co-authored-by: Lucas Lacerda <[email protected]> Co-authored-by: Kjell Reigstad <[email protected]> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <[email protected]> Co-authored-by: Andrew Etchen <[email protected]> * made the test/default blog post 3 by default * added updated placeholder image * added the different placeholder images, while maintaining ability to edit with presets * blog card theme settings work on default blog posts * removed css that wasn't being used * reverted to original code without theme settings * fixed prettier error by removing extra quotation mark and made test blog default instead of news --------- Co-authored-by: Jon Neill <[email protected]> Co-authored-by: Ludo <[email protected]> Co-authored-by: Sofia Matulis <[email protected]> Co-authored-by: Eugene Kasimov <[email protected]> Co-authored-by: Mateusz Krzeszowiak <[email protected]> Co-authored-by: Lucas Lacerda <[email protected]> Co-authored-by: Kjell Reigstad <[email protected]> Co-authored-by: shopify[bot] <79544226+shopify[bot]@users.noreply.github.com> Co-authored-by: Ken Meleta <[email protected]> Co-authored-by: Andrew Etchen <[email protected]>

made the test/default blog post 3 by default

71018b6

lougoncharenko requested a review from kmeleta May 24, 2023 18:32

lougoncharenko self-assigned this May 24, 2023

lougoncharenko linked an issue May 24, 2023 that may be closed by this pull request

Update blog post default state #2667

Closed

3 tasks

eugenekasimov self-requested a review May 24, 2023 21:18

eugenekasimov reviewed May 25, 2023

View reviewed changes

assets/section-featured-blog.css Show resolved Hide resolved

sections/featured-blog.liquid Outdated Show resolved Hide resolved

blog default posts are not mobile responsive and on a slider. created…

1a33599

… snippet for blog-placeholder that renders into featured-blog with changable arguments

lougoncharenko commented May 25, 2023

View reviewed changes

sections/featured-blog.liquid Show resolved Hide resolved

removed commented out code

182b08a

lougoncharenko requested a review from eugenekasimov May 25, 2023 15:31

eugenekasimov reviewed May 26, 2023

View reviewed changes

assets/section-featured-blog.css Outdated Show resolved Hide resolved

default blog posts now are modifiable by post-limit and column number…

f229782

… presets

lougoncharenko requested a review from eugenekasimov May 30, 2023 14:00

kmeleta reviewed May 30, 2023

View reviewed changes

sections/featured-blog.liquid Outdated Show resolved Hide resolved

sections/featured-blog.liquid Show resolved Hide resolved

assets/section-featured-blog.css Outdated Show resolved Hide resolved

lougoncharenko added 2 commits May 31, 2023 09:55

reformated code, reverted header back to h1, removed snippet, and mad…

9cc340b

…e changes as suggested

noticed the blog section needs a margin bottom when color scheme is a…

6f00f65

…pplied

lougoncharenko requested a review from kmeleta May 31, 2023 14:12

eugenekasimov reviewed Jun 1, 2023

View reviewed changes

assets/section-featured-blog.css Outdated Show resolved Hide resolved

lougoncharenko requested a review from Oliviammarcello June 5, 2023 13:06

removed padding from blog and removed date and author presets

87a5688

lougoncharenko requested a review from eugenekasimov June 6, 2023 14:36

eugenekasimov reviewed Jun 6, 2023

View reviewed changes

Fix link formatting in Related Products heading (#2680)

509a2c3

lougoncharenko and others added 5 commits June 7, 2023 08:37

made the test/default blog post 3 by default

37685fc

added updated placeholder image

8b0a3e4

Merge branch 'main' into louisa-update-blog-post-default-state

e8b832a

lougoncharenko requested a review from eugenekasimov June 7, 2023 12:54

added the different placeholder images, while maintaining ability to …

8602cb9

…edit with presets

eugenekasimov approved these changes Jun 7, 2023

View reviewed changes

andrewetchen self-requested a review June 7, 2023 19:29

kmeleta approved these changes Jun 7, 2023

View reviewed changes

sections/featured-blog.liquid Outdated Show resolved Hide resolved

sections/featured-blog.liquid Outdated Show resolved Hide resolved

andrewetchen reviewed Jun 7, 2023

View reviewed changes

assets/section-featured-blog.css Show resolved Hide resolved

andrewetchen reviewed Jun 7, 2023

View reviewed changes

lougoncharenko added 2 commits June 8, 2023 10:36

blog card theme settings work on default blog posts

9e390bd

removed css that wasn't being used

54243d0

lougoncharenko requested review from kmeleta, eugenekasimov and andrewetchen June 8, 2023 14:43

reverted to original code without theme settings

f6c2947

andrewetchen reviewed Jun 8, 2023

View reviewed changes

sections/featured-blog.liquid Outdated Show resolved Hide resolved

fixed prettier error by removing extra quotation mark and made test b…

3ae6e90

…log default instead of news

lougoncharenko requested a review from andrewetchen June 20, 2023 14:37

eugenekasimov approved these changes Jun 20, 2023

View reviewed changes

kimberlyoleiro added the good first issue label Jun 20, 2023

kmeleta reviewed Jun 21, 2023

View reviewed changes

removed settings from blog preset

b4ff7d7

Oliviammarcello approved these changes Jun 21, 2023

View reviewed changes

lougoncharenko merged commit 48ef65f into main Jun 21, 2023

lougoncharenko deleted the louisa-update-blog-post-default-state branch June 21, 2023 17:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

made the test/default blog post 3 by default #2670

made the test/default blog post 3 by default #2670

lougoncharenko commented May 24, 2023 •

edited

Loading

eugenekasimov left a comment •

edited

Loading

kmeleta left a comment

kimberlyoleiro commented May 30, 2023

eugenekasimov commented May 30, 2023

YoannJailin commented May 31, 2023

eugenekasimov left a comment •

edited

Loading

Oliviammarcello commented Jun 5, 2023 •

edited by lougoncharenko

Loading

eugenekasimov commented Jun 5, 2023

lougoncharenko commented Jun 6, 2023

eugenekasimov left a comment

Oliviammarcello commented Jun 6, 2023 •

edited

Loading

eugenekasimov left a comment

kmeleta left a comment

andrewetchen left a comment

Oliviammarcello commented Jun 8, 2023 •

edited

Loading

kmeleta left a comment

kmeleta Jun 21, 2023 •

edited

Loading

made the test/default blog post 3 by default #2670

made the test/default blog post 3 by default #2670

Conversation

lougoncharenko commented May 24, 2023 • edited Loading

PR Summary:

Why are these changes introduced?

What approach did you take?

Visual impact on existing themes

Testing steps/scenarios

Demo links

Checklist

eugenekasimov left a comment • edited Loading

Choose a reason for hiding this comment

kmeleta left a comment

Choose a reason for hiding this comment

kimberlyoleiro commented May 30, 2023

eugenekasimov commented May 30, 2023

YoannJailin commented May 31, 2023

eugenekasimov left a comment • edited Loading

Choose a reason for hiding this comment

Oliviammarcello commented Jun 5, 2023 • edited by lougoncharenko Loading

eugenekasimov commented Jun 5, 2023

lougoncharenko commented Jun 6, 2023

eugenekasimov left a comment

Choose a reason for hiding this comment

Oliviammarcello commented Jun 6, 2023 • edited Loading

eugenekasimov left a comment

Choose a reason for hiding this comment

kmeleta left a comment

Choose a reason for hiding this comment

andrewetchen left a comment

Choose a reason for hiding this comment

Oliviammarcello commented Jun 8, 2023 • edited Loading

kmeleta left a comment

Choose a reason for hiding this comment

kmeleta Jun 21, 2023 • edited Loading

Choose a reason for hiding this comment

lougoncharenko commented May 24, 2023 •

edited

Loading

eugenekasimov left a comment •

edited

Loading

eugenekasimov left a comment •

edited

Loading

Oliviammarcello commented Jun 5, 2023 •

edited by lougoncharenko

Loading

Oliviammarcello commented Jun 6, 2023 •

edited

Loading

Oliviammarcello commented Jun 8, 2023 •

edited

Loading

kmeleta Jun 21, 2023 •

edited

Loading