woocommerce / storefront

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

Services Block Button: Can't align center. #1348

Closed LauraSWP closed 4 years ago

LauraSWP commented 4 years ago

Describe the bug

This happens when adding the block "Services".

Add a button to the block options.

The first time you add the button, it will be aligned center. But it is now. It's actually aligned to the left.

If you change it to be aligned to the center and save, the button aligns to the left at the front-end version of the page.

Align to the right and to the left works. Align to the center aligns it to the left. However, the correct CSS class is applied: .wp-block-button.aligncenter

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

To Reproduce

Steps to reproduce the behavior:

  1. Go to 'Pages' and add/edit a page.
  2. Click on 'Add a block icon' and select "Services".
  3. Add a button to the services by selecting the "Display button" option at the Services block settings.
  4. See the button aligned to the center. It is now. Select the align option at the button to see it is actually aligned to the left and then align it to the center.
  5. Save changes and visit the page.
  6. See the button NOT aligned to the center but the CSS class .wp-block-button.aligncenter is applied to it.

Screenshots

I created a Gif of the process: button-align-center

Expected behavior

After you add a button to the services block and align it to the center. It does.

Browser Environment

Chrome Version 81.0.4044.138 (Official Build) (64-bit) Windows 10

WordPress Environment

WordPress.com Block editor

`
### WordPress Environment ###

WordPress address (URL): https://testkgumihobusiness.blog
Site address (URL): https://testkgumihobusiness.blog
WC Version: 4.1.0
REST API Version: ✔ 1.0.7
WC Blocks Version: ✔ 2.5.16
Action Scheduler Version: ✔ 3.1.5
WC Admin Version: ✔ 1.1.1
Log Directory Writable: ✔
WP Version: 5.4.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.17
PHP Post Max Size: 2 GB
PHP Time Limit: 1200
PHP Max Input Vars: 6144
cURL Version: 7.69.1
OpenSSL/1.1.1d

SUHOSIN Installed: –
MySQL Version: 5.5.5-10.3.20-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: 4.1.0
WC Database Prefix: wp_
Total Database Size: 2.40MB
Database Data Size: 1.02MB
Database Index Size: 1.38MB
wp_woocommerce_sessions: Data: 0.02MB + 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.06MB + 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_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 0.09MB + Index: 0.03MB + Engine InnoDB
wp_postmeta: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
wp_posts: Data: 0.09MB + Index: 0.06MB + 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_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

### Post Type Counts ###

attachment: 7
feedback: 2
jetpack_migration: 2
jp_img_sitemap: 3
jp_pay_product: 3
jp_sitemap: 3
jp_sitemap_master: 3
nav_menu_item: 1
page: 2
post: 3
revision: 8
wpcf7_contact_form: 1

### Security ###

Secure connection (HTTPS): ✔
Hide errors from visitors: ✔

### Active Plugins (9) ###

Akismet Anti-Spam: by Automattic – 4.1.5
AMP: by AMP Project Contributors – 1.5.3
CoBlocks: by GoDaddy – 1.26.1
Contact Form 7: by Takayuki Miyoshi – 5.1.7
Full Site Editing: by Automattic – 1.4
Gutenberg: by Gutenberg Team – 8.0.0
Jetpack by WordPress.com: by Automattic – 8.5
Layout Grid: by Automattic – 1.2
WooCommerce: by Automattic – 4.1.0

### Inactive Plugins (2) ###

Classic Editor: by WordPress Contributors – 1.5
Page Optimize: by Automattic – 0.4.6

### 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: GBP (£)
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: ❌ Page not set
Cart: ❌ Page not set
Checkout: ❌ Page not set
My account: ❌ Page not set
Terms and conditions: ❌ Page not set

### Theme ###

Name: Storefront
Version: 2.5.6
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: 1
Oldest: 2020-05-12 21:24:46 +0000
Newest: 2020-05-12 21:24:46 +0000

haszari commented 4 years ago

Thanks for reporting this @LauraSWP :)

I don't see a Services block with just WooCommerce + Storefront active. I think this block is from the CoBlocks plugin.

I think this might be an issue with the default align setting for the button block. All three modes work correctly if, just seems to be a slight inconsistency with the default align setting. See below - I was able to use all align values successfully:

Screen Shot 2020-05-13 at 1 04 05 PM

Since it's a minor problem (just affecting the default) I'm going to close this issue. If this is causing an issue, I'd suggest opening an issue with CoBlocks as a next step.