search

woocommerce / storefront

Official theme for WooCommerce
https://wordpress.org/themes/storefront/
974 stars 471 forks source link

Storefront: Content within Wide width blocks cut off with Powerpack framed layout #1682

Open mikeicode opened 3 years ago

mikeicode commented 3 years ago

Describe the bug

Powerpack has an option to set the content to be “framed”. Storefront has CSS for blocks set to Wide width. The Wide width blocks overflow outside of the framed content and the content is hidden.

Appears that this negative margin may need to be adjusted when a site is using the framed layout:

https://d.pr/i/tUfDmV

Isolating the problem (mark completed items with an [x]):

To Reproduce

Steps to reproduce the behavior:

  1. Set a site to a “framed” layout via Customizer > Powerpack > Layout > Content frame > Frame
  2. Add blocks set to Wide width (I tested Media / Text and Heading)
  3. View page on larger screen widths

Screenshots

Overflow issue:

https://d.pr/i/yKpIwR

Expected behavior

Content shouldn’t be hidden.

Browser Environment

WordPress Environment

WordPress.com site on Version 5.7.1, eCommerce plan

``` ` ### WordPress Environment ### WordPress address (URL): https://ecom-plan-test.blog Site address (URL): https://ecom-plan-test.blog WC Version: 5.2.2 REST API Version: ✔ 5.2.2 WC Blocks Version: ✔ 4.7.2 Action Scheduler Version: ✔ 3.1.6 WC Admin Version: ✔ 2.1.5 Log Directory Writable: ✔ WP Version: 5.7.1 WP Multisite: – WP Memory Limit: 256 MB WP Debug Mode: ✔ WP Cron: ✔ Language: en_US External object cache: ✔ ### Server Environment ### Server Info: nginx PHP Version: 7.3.28 PHP Post Max Size: 2 GB PHP Time Limit: 1200 PHP Max Input Vars: 6144 cURL Version: 7.76.0 OpenSSL/1.1.0l SUHOSIN Installed: – MySQL Version: 5.5.5-10.3.21-MariaDB-log Max Upload Size: 2 GB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ✔ DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔ ### Database ### WC Database Version: 5.2.2 WC Database Prefix: wp_ Total Database Size: 4.36MB Database Data Size: 2.84MB Database Index Size: 1.52MB wp_woocommerce_sessions: Data: 0.13MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_downloadable_product_permissions: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_actions: Data: 0.02MB + Index: 0.11MB + Engine InnoDB wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_actionscheduler_logs: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_comments: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_failed_jobs: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_mailchimp_carts: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_mailchimp_jobs: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_ms_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_options: Data: 1.06MB + Index: 0.06MB + Engine InnoDB wp_postmeta: Data: 0.22MB + Index: 0.13MB + Engine InnoDB wp_posts: Data: 0.47MB + Index: 0.06MB + Engine InnoDB wp_queue: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_snippets: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_admin_notes: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_admin_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_square_customers: Data: 0.02MB + Index: 0.00MB + Engine InnoDB wp_yoast_seo_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_yoast_seo_meta: Data: 0.02MB + Index: 0.00MB + Engine InnoDB ### Post Type Counts ### attachment: 38 customize_changeset: 113 custom_css: 6 jetpack_migration: 2 jp_img_sitemap: 3 jp_sitemap: 3 jp_sitemap_master: 3 nav_menu_item: 7 page: 32 post: 3 product: 19 product_variation: 7 revision: 108 tt_font_control: 1 ### Security ### Secure connection (HTTPS): ✔ Hide errors from visitors: ✔ ### Active Plugins (8) ### Akismet Anti-Spam: by Automattic – 4.1.9 Code Snippets: by Code Snippets Pro – 2.14.1 Jetpack by WordPress.com: by Automattic – 9.7 Klarna Payments for WooCommerce: by krokedil klarna automattic – 2.4.3 Layout Grid: by Automattic – 1.6 Storefront Powerpack: by WooCommerce – 2.0.0 WooCommerce USPS Shipping: by WooCommerce – 4.4.50 WooCommerce: by Automattic – 5.2.2 ### Inactive Plugins (34) ### All-in-One WP Migration: by ServMask – 7.40 AMP: by AMP Project Contributors – 2.1.1 Change WooCommerce Add to Cart Text: by Rextheme – 1.3 Classic Editor: by WordPress Contributors – 1.6 CoBlocks: by GoDaddy – 1.25.0 Coming Soon Page, Maintenance Mode & Landing Pages by SeedProd: by SeedProd – 6.2.1 Easy Google Fonts: by Titanium Themes – 1.4.4 Facebook for WooCommerce: by Facebook – 2.4.1 Gallery Custom Links: by Jordy Meow – 2.0.3 Gutenberg: by Gutenberg Team – 8.1.0 Insert Headers and Footers: by WPBeginner – 1.5.0 Klarna Checkout for WooCommerce: by Krokedil – 2.5.4 Loco Translate: by Tim Whitlock – 2.5.2 Mailchimp for WooCommerce: by Mailchimp – 2.5.1 Page Optimize: by Automattic – 0.5.1 Regenerate Thumbnails: by Alex Mills (Viper007Bond) – 3.1.5 Starscape Block: by Automattic – 1.0.2 TaxJar - Sales Tax Automation for WooCommerce: by TaxJar – 3.2.7 WooCommerce Australia Post Shipping: by WooCommerce – 2.4.28 WooCommerce Blocks: by Automattic – 4.8.0 WooCommerce Canada Post Shipping: by WooCommerce – 2.5.19 WooCommerce eWAY Payment Gateway: by WooCommerce – 3.1.25 WooCommerce PayFast Gateway: by WooCommerce – 1.4.19 WooCommerce PayPal Checkout Gateway: by WooCommerce – 2.1.1 WooCommerce Product Add-ons: by WooCommerce – 3.9.1 WooCommerce Royal Mail: by WooCommerce – 2.5.34 WooCommerce Shipping & Tax: by WooCommerce – 1.25.12 WooCommerce Square: by WooCommerce – 2.4.1 WooCommerce Stripe Gateway: by WooCommerce – 5.1.0 WooCommerce UPS Shipping: by WooCommerce – 3.2.31 WordPress.com Editing Toolkit: by Automattic – 3.6007 WordPress Backup & Security Plugin - BlogVault: by Backup by BlogVault – 4.57 WP Job Manager: by Automattic – 1.35.0 Yoast SEO: by Team Yoast – 16.0.2 ### Dropin Plugins (2) ### advanced-cache.php: advanced-cache.php object-cache.php: Memcached ### Must Use Plugins (1) ### WP.com Site Helper: by – ### Settings ### API Enabled: – Force SSL: – Currency: EUR (€) Currency Position: left Thousand Separator: . Decimal Separator: , Number of Decimals: 2 Taxonomies: Product Types: external (external) grouped (grouped) simple (simple) variable (variable) Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog) exclude-from-search (exclude-from-search) featured (featured) outofstock (outofstock) rated-1 (rated-1) rated-2 (rated-2) rated-3 (rated-3) rated-4 (rated-4) rated-5 (rated-5) Connected to WooCommerce.com: ✔ ### WC Pages ### Shop base: #6 - /shop/ Cart: #7 - /cart/ Checkout: #8 - /checkout/ My account: #9 - /my-account/ Terms and conditions: ❌ Page not set ### Theme ### Name: Storefront Version: 3.5.1 Author URL: https://woocommerce.com/ Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme WooCommerce Support: ✔ ### Templates ### Overrides: – ### Action Scheduler ### Complete: 5 Oldest: 2021-04-10 09:03:08 +0000 Newest: 2021-05-08 13:22:34 +0000 Pending: 1 Oldest: 2021-05-15 13:22:34 +0000 Newest: 2021-05-15 13:22:34 +0000 ### Status report information ### Generated at: 2021-05-10 15:42:01 +00:00 ` ```
opr commented 3 years ago

Thanks for the report, @mikeicode! I can replicate this bug, but I think that this is an issue with the Storefront Powerpack extension rather than Storefront theme. I'll move this issue there shortly.

Before I do, @Aljullu - paging you as the CSS Guru, do you think that adding overflow: visible to .sp-fixed-width .site here is an acceptable solution to this? Or do you believe this is an issue with Storefront theme?

Aljullu commented 3 years ago

Interesting issue! I think it all depends on what the expectation is when using the Content frame option with wide-aligned blocks: should wide blocks become narrower or should they overflow the container? I'm not sure if there is a correct answer because the Content frame option and wide alignment attribute feel contradictory to me: does it make sense making something wide if it needs to be contained in a frame? :thinking:

do you think that adding overflow: visible to .sp-fixed-width .site here is an acceptable solution to this? Or do you believe this is an issue with Storefront theme?

That was my first thought as well and if the goal is to get the wide blocks to overflow the container, it works great. So a +1 from my side to go with this solution. :+1:

opr commented 3 years ago

thanks @Aljullu - yeah I'm not sure either what the best UX here would be, if we do want to contain the content, then this would actually be a Gutenberg issue wouldn't it?

@vivialice please could you give us a hand deciding on the best UX for this? If the user has enabled the Content frame option in Storefront Powerpack, should we let deliberately-set "wide" content overflow the frame, or should content always be contained within the frame? Looking at the docs, I'm more inclined to say we shouldn't let it overflow... but what do you think?