Make WordPress Core

Opened 11 months ago

Closed 2 months ago

Last modified 2 months ago

#58498 closed defect (bug) (fixed)

Twenty Fifteen: Cover and File blocks spacing

Reported by: mayur8991's profile mayur8991 Owned by: sergeybiryukov's profile SergeyBiryukov
Milestone: 6.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-testing-info has-patch has-screenshots commit
Focuses: css Cc:

Description

Backend : https://prnt.sc/iMIHui1cpt-v
Frontend : https://prnt.sc/1Y5xpMmMWc9E

How to reproduce bug

  • Activate Twenty Fifteen Theme
  • Add new page then Add cover block and just below it Add File widget
  • Save the page and check frontend

Enviornment

PHP : 8
Wordpress : 6.2.2
Theme : Twenty Fifteen Version 3.4
Browser : Chrome
OS : Window

Note : This bug only appear in Twenty Fifteen Theme and in rest of the bundled themes it looks great & UI issue only appear when we choose this two widgets only if you choose any other widget it will look proper

Attachments (3)

frontend.jpg (84.4 KB) - added by mayur8991 11 months ago.
backend.jpg (128.4 KB) - added by mayur8991 11 months ago.
58498.diff (439 bytes) - added by itpathsolutions 7 months ago.
Patch added

Download all attachments as: .zip

Change History (22)

@mayur8991
11 months ago

@mayur8991
11 months ago

#1 @panchalhimani711
11 months ago

@mayur8991

can be fix with css

.wp-block-cover { margin-bottom: 1em; }
Last edited 11 months ago by panchalhimani711 (previous) (diff)

#2 @sabernhardt
10 months ago

  • Focuses ui removed
  • Summary changed from Twenty Fifteen Theme - Cover and file widget UI Issue to Twenty Fifteen: Cover and File blocks spacing

If you mean that the Cover block overlaps the File block download link, that should be fixed by the addition of display: inline-block in GB41870.

If you want space between the blocks, that would be another matter. In the editor, blocks have space in between them to make room for the inserter that appears when you hover the cursor above it. On the front, blocks such as Cover, Group or Columns probably should not have margins automatically. File blocks should have some space; they have a default bottom margin of 1.5em but for some reason do not have the same on top. I think that would be better to address this in the File block styles than in individual themes.

#3 @mayur8991
9 months ago

  • Keywords needs-patch needs-testing added

@itpathsolutions
7 months ago

Patch added

#4 @itpathsolutions
7 months ago

  • Keywords needs-patch removed

Added patch

#5 @thakordarshil
7 months ago

  • Keywords has-testing-info added; needs-testing removed

Hi

Test report for - https://core.trac.wordpress.org/attachment/ticket/58498/58498.diff patch
Environment : PHP 8
WordPress - 6.2.2 & 6.3.1
Theme - Twenty Fifteen Version: 3.5
Os: Windows
Browser: Chrome
Expected Result: There should be space between cover widget and file widget

Before Patch

Backend - https://prnt.sc/7G6HVzUhnAcB
Frontend - https://prnt.sc/cbAX_gSMRsRq

After Patch
Backend - https://prnt.sc/YWPyJhvc5oQ4
Frontend - https://prnt.sc/2xJIrbWN6jVk

Thanks!

#6 @mukesh27
4 months ago

  • Keywords needs-patch needs-testing added
  • Milestone changed from Awaiting Review to 6.5
  • Version 6.2.2 deleted

Hi @mayur8991, Thank you for providing the ticket. As @sabernhardt suggested, adding margin for the button seems necessary. I've explored other themes, and it appears that they've incorporated the top margin for the button selector. Hence, I believe adopting that approach would be suitable.

I'll proceed to raise the PR shortly.

This ticket was mentioned in PR #5776 on WordPress/wordpress-develop by @mukesh27.


4 months ago
#7

  • Keywords has-patch added; needs-patch removed

@mukesh27 commented on PR #5776:


4 months ago
#8

After the patch.

https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/10103365/de23161a-2e54-4f65-a5b4-363fb89f7571

@Ankit K Gupta commented on PR #5776:


4 months ago
#9

## Test Report ✅

### Description
This report validates whether the indicated patch works as expected.

Patch tested: https://github.com/WordPress/wordpress-develop/pull/5776

### Environment

  • WordPress: 6.5-alpha-20231217.053908
  • PHP: 8.3.0-dev
  • Server: PHP.wasm
  • Database: WP_SQLite_Translator (Server: 5.5 / Client: 3.40.1)
  • Browser: Chrome 120.0.0.0
  • OS: macOS
  • Theme: Twenty Fifteen 3.6
  • MU Plugins:
    • 0-playground.php
    • WordPress WXZ Exporter 0.1
  • Plugins:
    • SQLite Database Integration 2.1.3
    • Test Reports 1.0.0
    • WordPress Importer Git loader 0.8.1

### Actual Results

✅ Issue resolved with PR https://github.com/WordPress/wordpress-develop/pull/5776.

### Supplemental Artifacts

Before Fix After Fix
https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/6384299/d7034c4f-220e-4c72-8baa-6d1839ce3fb6 https://i0.wp.com/github.com/WordPress/wordpress-develop/assets/6384299/0ec40aad-5487-41ff-a341-2b7bd9ff2d1e

Next Step- Ready to Merge 🚀

#10 @Ankit K Gupta
4 months ago

  • Keywords needs-testing removed

This ticket was mentioned in Slack in #core-test by ankit-k-gupta. View the logs.


4 months ago

#12 @ugyensupport
4 months ago

Description

Twenty Fifteen: Cover and File blocks spacing

Environment

  • WordPress: 6.4.2
  • PHP: 8.3.0
  • Server: Apache/2.4.54 (Unix) mod_fastcgi/mod_fastcgi-SNAP-0910052141 OpenSSL/1.0.2u mod_wsgi/3.5 Python/2.7.18
  • Database: mysqli (Server: 5.7.39 / Client: mysqlnd 8.3.0)
  • Browser: Chrome 120.0.0.0 (macOS)
  • Theme: Twenty Fifteen 3.6
  • MU-Plugins: None activated
    • Gutenberg 17.2.3
    • WordPress Beta Tester 3.5.5

Steps to Reproduce

  1. How to reproduce bug
  2. Activate Twenty Fifteen Theme
  3. Add new page then Add cover block and just below it Add File widget
  4. Save the page and check frontend
  5. 🐞 Bug occurs.

Actual Results

  1. ✅ Issue resolved with PR https://github.com/WordPress/wordpress-develop/pull/5776.

#13 @pooja1210
3 months ago

Hi,

Test Report for -https://core.trac.wordpress.org/attachment/ticket/58498/58498.diff

Environment:
WordPress: v6.4.2
Theme: Twenty Fifteen
PHP - v8.0
OS: Mac
Browser: Chrome

Expected Result: The space between the cover and file block should be visible.

Screenshot:

Before- https://prnt.sc/OlKU_f_nRk2v

After- https://prnt.sc/OYms7JdDhusj

Thanks

#14 @shailu25
3 months ago

Test Report

Patch Tested: https://github.com/WordPress/wordpress-develop/pull/5776

Environment:

OS: Windows
PHP: 8.0.18
WordPress: 6.4.2
Browser: Chrome
Theme: Twenty Fifteen
Plugins: None

Expected Result:

The space between the cover and file block should be visible.

Actual Results:

The space between the cover and file block is now visible. ✅

Screenshots:

Before patch: https://prnt.sc/CW6h8uIvAf0m
After patch: https://prnt.sc/birOScnBdKcd

#15 @harshgajipara
3 months ago

  • Keywords has-screenshots added

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: https://github.com/WordPress/wordpress-develop/pull/5776

Environment

OS: Windows
PHP: 8.1.9
WordPress: 6.4.2
Browser: Chrome
Theme: Twenty Fifteen
Plugins: None activated

Actual Results:

✅ Before patch: The space between the cover and file block not visible.
https://prnt.sc/uGxY2cdDps3V

✅ After patch: The space between the cover and file block is visible.
https://prnt.sc/TQN9JRDZueaY

#16 @darshitrajyaguru97
3 months ago

Test Report for: https://core.trac.wordpress.org/attachment/ticket/58498/58498.diff

Environment:
============
WordPress: v6.4.2
Theme: Twenty Fifteen
PHP: v8.1.2
OS: Windows
Browser: Chrome

Before Patch:
===========
https://prnt.sc/iE_p-DDS7By9

After Patch:
==========
https://prnt.sc/fYO2vik50cO7

It's working well.
Thanks!!!

#17 @poena
2 months ago

  • Keywords commit added

I'm adding the commit keyword for https://github.com/WordPress/wordpress-develop/pull/5776 which changes styles for the file block, based on the comments and test results above.

#18 @SergeyBiryukov
2 months ago

  • Owner set to SergeyBiryukov
  • Resolution set to fixed
  • Status changed from assigned to closed

In 57581:

Twenty Fifteen: Add top margin to the File block button styles.

This ensures that there is some spacing between the Cover and File blocks.

Props mukesh27, mayur8991, panchalhimani711, sabernhardt, itpathsolutions, thakordarshil, ankit-k-gupta, ugyensupport, pooja1210, shailu25, harshgajipara, darshitrajyaguru97, poena.
Fixes #58498.

@SergeyBiryukov commented on PR #5776:


2 months ago
#19

Thanks for the PR! Merged in r57581.

Note: See TracTickets for help on using tickets.