Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blockbase: WooCommerce templates #5079

Draft
wants to merge 4 commits into
base: trunk
Choose a base branch
from
Draft

Conversation

MaggieCabrera
Copy link
Contributor

@MaggieCabrera MaggieCabrera commented Nov 23, 2021

Changes proposed in this Pull Request:

This PR styles the new block templates for Woo. To test this follow the instructions over at woocommerce/woocommerce-blocks#4926 (Note: I had to use version 6.3.2 of the woo blocks plugin to get this working)

I added the mini cart next to the site title because I don't think we can add it into the navigation block yet. The position could use adjusting but I think we need to improve Blockbase header anyway because of #5078

I found some bugs that I avoided using the following:

Product page:

Screenshot 2021-11-23 at 17-34-50 T-Shirt with Logo – fresh

Archive page (note: this doesn't show wide aligned with this PR until woocommerce/woocommerce-blocks#5230 is resolved):

Screenshot 2021-11-24 at 11-01-23 Clothing – fresh

Mini cart:

Screenshot 2021-11-24 at 11 47 30

Screenshot 2021-11-24 at 11 48 25

I opened the following upstream:

@MaggieCabrera
Copy link
Contributor Author

Looks like the archive template is being overridden by the taxonomy ones, I'm waiting on feedback to see if this is intended or not.

@scruffian
Copy link
Member

What stops us from using the templates added by WC?

@MaggieCabrera
Copy link
Contributor Author

What stops us from using the templates added by WC?

We don't have to do anything for those to be available as soon as you install the plugin. This PR just ads wide width to them so they look better than the normal width that they get if we don't modify them.

In fact, the next step after this is to audit the rest of the templates that exist but are not block based already and check how they interact with the theme's CSS (I've seen that our padding for inputs make them too big in the checkout pages for example)

@Aljullu
Copy link
Contributor

Aljullu commented Dec 2, 2021

Exciting to see Blockbase adding support for WooCommerce. And thanks @MaggieCabrera for opening those issues in our repo!

I added the mini cart next to the site title because I don't think we can add it into the navigation block yet.

Right, there is some more info about this here: WordPress/gutenberg#31387. I also wanted to mention that the Mini Cart block is still in development, so I'm not sure if it's safe to start using it in template parts given that it hasn't been released yet.

Related to that, is there any way to make the Mini Cart block to dynamically appear in the header only if WooCommerce is installed?

@MaggieCabrera
Copy link
Contributor Author

Right, there is some more info about this here: WordPress/gutenberg#31387. I also wanted to mention that the Mini Cart block is still in development, so I'm not sure if it's safe to start using it in template parts given that it hasn't been released yet.

Thanks for the link! This is an initial exploration so we are not adding anything yet, but thanks for letting us know. Also, having it in the navigation block would be ideal! I tried to add it there but it didn't show up for me.

Related to that, is there any way to make the Mini Cart block to dynamically appear in the header only if WooCommerce is installed?

Not from a theme perspective that I know of! From what I know, if a block is on a theme and the plugin is not present or not the version that includes the block, the user gets a "this block couldn't be found" on a placeholder instead.

@sophiegyo
Copy link
Contributor

Hi! I wanted to ask if there was any chance of adding in the menu into the WooCommerce templates? Right now for users with Blockbase child themes on their site, there's no menu showing up in the header.

This is how it looks on a jurassic ninja site, with WP 5.8.2, WooCommerce 6.0.0 and Gutenberg 12.0:
jrwooblockbase

Here's my atomic site for comparison:
atblockbasewoo

There's also a "sidebar" consistently appearing at the bottom of WooCommerce pages (but not others) with Blockbase:
blockbasesidebarwoo

Also, the site title on Woo pages is missing the site title class assigned to the H1 element on other template pages:

Woo template:
wooblockbasesitetitleclass

regular page template::
blockbasesitetitleclass

User report: 4641737-zen

@Aljullu
Copy link
Contributor

Aljullu commented Jan 5, 2022

@sophiegyo could you test with WooCommerce 6.1 RC2? Looking at your screenshots, it seems like block templates are not loading correctly. There have been some recent changes in WP 5.9 that made WC 6.0 not to properly detect block themes. We are looking into fixing this in WC 6.1.

@liviopv
Copy link

liviopv commented Jan 5, 2022

@Aljullu I tested the RC on a jurassic.ninja site (I couldn't load the RC on Atomic, even with the Beta Tester plugin, as it kept switching to 6.0) and I couldn't reproduce the issues @sophiegyo described.

Here's a product page for reference:
Markup on 2022-01-05 at 11:13:21

@liviopv
Copy link

liviopv commented Mar 18, 2022

Currently, the default Single Product template for Blockbase has a broken Quantity Element.

Screenshot
Screenshot: https://d.pr/i/Jz5L1J

@MaggieCabrera should I report it as a separate bug, or is this included in this PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants