CSS class changes for blocks in 3.7

  • Resolved traed

    (@traed)


    5 years, 7 months ago

    I just upgraded to 3.7 and noticed all the CSS classes for the Newest Products block has changed. I didn’t see this in the changelog and of course this breaks my custom CSS completely. Did I miss something? Where is this change documented?

    For example, the list-element (ul) used to have the classes “products columns-6” but now it has “wc-block-grid__products”.

    • This topic was modified 5 years, 7 months ago by traed.
    • This topic was modified 5 years, 7 months ago by traed.
    • This topic was modified 5 years, 7 months ago by traed.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Thomas Shellberg

    (@shellbeezy)

    Automattic Happiness Engineer

    Hey @traed,

    The “Newest Products” block is added by the WooCommerce Product Blocks plugin:

    https://github.com/woocommerce/woocommerce-gutenberg-products-block

    I don’t see anything in the changelog of that plugin mentioning changes to the Newest Product block specifically.

    Were you using the WooCommerce Product Blocks plugin previously before updating to 3.7? If so, what version?

    It’s possible that it has to do with moving to dynamic Server-Side Rendering as all of the blocks now use a similar rendering pattern rather than just a shortcode. Were you using a shortcode to generate the “new products”?

    Thread Starter traed

    (@traed)

    No, I don’t use the plugin since WooCommerce ships with the blocks nowadays. I’m not using shortcodes either, unless that is something being done under the hood. I’m just adding blocks using the GUI.

    Since the blocks ship with WooCommerce, shouldn’t changes to them be reflected in WooCommerce changelog as well? I don’t think avarage users will know to check some other github repo before updating.

    Seeing the same problem after upgrading Woocommerce 1 day ago.

    Had a woo block on homepage for new products. The CSS for the theme I am using is now overridden on that page.

    Product title/price fonts add to cart button etc

    traed,

    Delete the Woo Product block and insert a shortcode block instead (Blocks>Widgets>Shortcode) ie:

    [products limit=”24″ columns=”4″ orderby=”id” order=”DESC” visibility=”visible”]

    It should display the products as before. Works for me.

    Thomas Shellberg

    (@shellbeezy)

    Automattic Happiness Engineer

    Hey @traed ,

    No, I don’t use the plugin since WooCommerce ships with the blocks nowadays. I’m not using shortcodes either, unless that is something being done under the hood. I’m just adding blocks using the GUI.

    I’m confused by this answer. How did you add blocks before if you didn’t use the WooCommerce Blocks plugin? It was a separate plugin until it was merged into 3.7.

    As @raymondoamw mentioned if you wrote all of your custom CSS to work with layouts created by shortcodes you should use a shortcode again.

    Thread Starter traed

    (@traed)

    @shellbeezy The blocks have been part of woocommerce core since before 3.7. I was using this block in 3.6. It seems they have been reworked in 3.7, hence the markup change. This wasn’t reflected in the changelog.

    Same here, the product category block’s CSS classes have changed from WC 3.6.5 to 3.7.0 (no separate blocks plugin in use, it’s been in the previous WC core).

    I’ve renamed my classes in custom styles so that’s covered, yet I’m left puzzled with the lack of responsiveness in product category block of WC 3.7.0.

    WC 3.6.5 had a file..:

    https://github.com/woocommerce/woocommerce/blob/master/assets/css/woocommerce-smallscreen.scss

    …that set 2 columns side by side on small screens, but the file’s gone now, and there does not seem to be anything for responsiveness in..:

    https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/master/assets/css/style.scss

    Thus if I select 4 columns for the product category block, it’ll show 4 cols on both large and small screens, and obviously that’s way too tight for mobiles.

    Overriding the WC class “has-4-columns” feels like a wrong answer.

    I hope I’ve overlook something, but right now I can’t seem to find an explanation for this.

    Any thoughts?

    Found a ticket “Product Blocks not Responsive” @ https://github.com/woocommerce/woocommerce/issues/24444

    plaidpiper

    (@itsmrwalshtoyou)

    @jokanane @traed @raymondoamw – I’ve had exactly this issue too.

    We setup a new site for a client in 3.6.5.

    We meticulously put everything together in gutenberg then read the changelog for 3.7 and saw nothing that would have meant more work. So we updated – then this!

    @shellbeezy – This sort of thing has to be be in change logs! Depending on how many sites this block is used in, this could result in hours of unplanned work.

    Also, a bit surprised you were unaware of the blocks being in core since 3.6 (see line 126 here https://github.com/woocommerce/woocommerce/blob/master/CHANGELOG.txt)

    Surely, the way it worked prior to 3.7, with classes that matched the product loop was much more compatible with themes out of the box?

    Hoping this can be reverted in the next release.

    • This reply was modified 5 years, 6 months ago by plaidpiper.
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘CSS class changes for blocks in 3.7’ is closed to new replies.

Tags