Twenty Fifteen: Cover and File blocks spacing

[mayur8991]

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

[panchalhimani711]

@mayur8991

can be fix with css

.wp-block-cover { margin-bottom: 1em; }

[sabernhardt]

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.

[itpathsolutions]

Patch added

[itpathsolutions]

Added patch

[thakordarshil]

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!

[mukesh27]

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.

Trac ticket: https://core.trac.wordpress.org/ticket/58498

After the patch.

## 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

Next Step- Ready to Merge 🚀

[ugyensupport]

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.

[pooja1210]

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

[shailu25]

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

[harshgajipara]

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

[darshitrajyaguru97]

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!!!

[poena]

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.

[SergeyBiryukov]

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.

Thanks for the PR! Merged in r57581.