Make WordPress Core

Opened 9 months ago

Last modified 9 months ago

#59203 new defect (bug)

Twenty Nineteen: fix Separator block's full-width size and placement

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.3
Component: Bundled Theme Keywords: has-patch changes-requested
Focuses: css Cc:

Description

Steps to Reproduce the issue :-

  1. Activate Twenty Nineteen Theme.
  2. Take Separator Block.
  3. Choose Default from the styles.
  4. Choose Full-width.

You can able to see two issues.
1> In editor side the separator is not visible.
2> Both side editor and front end even after applying full-width it is not showing in full width.

I have attached video for better understanding.
Video URL :- https://share.cleanshot.com/4ybJ9CQsCPR33NW1DPLm

Attachments (1)

59203.patch (1.3 KB) - added by nidhidhandhukiya 9 months ago.

Download all attachments as: .zip

Change History (3)

#1 @shailu25
9 months ago

  • Keywords has-patch added

#2 @sabernhardt
9 months ago

  • Focuses css added
  • Keywords changes-requested added
  • Summary changed from Twenty Ninteen - Separator block is having issue when default and full-width is selected. to Twenty Nineteen: fix Separator block's full-width size and placement

The Separator block needs to remain 2.25rem for the Default style when it has no alignment, center or Wide width.

The Full width alignment probably could span the full page width in both the Default and Wide Line styles, overiding the max-width in sass/blocks/_blocks.scss.

	.wp-block-separator.alignfull {
		max-width: none;
	}

In style-editor.scss, the width could be 100% for Default and Wide Line styles:

.wp-block[data-align="full"] .wp-block-separator:not(.is-style-dots) {
	width: 100%;
}

To fix the missing margin in the iframe editor, the editor styles need to add a selector such as block-editor-iframe__body (it was already adjusted in [48602] and [52925]).

		&.block-editor-iframe__body,
		&.block-editor-writing-flow,
		.block-editor-writing-flow {
			max-width: 80%;
			margin: 0 10%;
		}
Note: See TracTickets for help on using tickets.