Skip to content

Commit

Permalink
Edit Site: Allow wide alignment (#23488)
Browse files Browse the repository at this point in the history
For the Site Editor, we want to allow post content to be inserted at full width (e.g. Cover Blocks). This is currently impossible (see Automattic/wp-calypso#43640) due to two independent problems. This PR fixes them.

1. [Unlike the Post Editor](https://github.com/WordPress/WordPress/blob/f18870ae4e1cb3cd81136424e43c99d705aa2912/wp-admin/edit-form-blocks.php#L286), we're currently not setting `alignWide` in the Site Editor's settings, which becomes a problem here: https://github.com/WordPress/gutenberg/blob/9cd07a92d463377767f56c2b3985badbd363d98f/packages/block-editor/src/hooks/align.js#L173-L196.
2. In order to specifically make the Post Content block full-width, we need to add `align` to its `supports` attribute. (It's still conceivable to use this block at other widths, e.g. in a setting with a sidebar.)

Finally, there remained a 10px padding even after applying these changes. This was fixed by removing block list padding from the Site Editor (a change that had previously been applied to the Post Editor in #22213).
  • Loading branch information
ockham authored Jun 30, 2020
1 parent c2c083c commit 266ca8f
Show file tree
Hide file tree
Showing 4 changed files with 3 additions and 14 deletions.
1 change: 1 addition & 0 deletions lib/edit-site-page.php
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ function gutenberg_edit_site_init( $hook ) {
}

$settings = array(
'alignWide' => get_theme_support( 'align-wide' ),
'disableCustomColors' => get_theme_support( 'disable-custom-colors' ),
'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
'imageSizes' => $available_image_sizes,
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/post-content/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"postType"
],
"supports": {
"align": true,
"html": false
}
}
1 change: 1 addition & 0 deletions packages/block-library/src/template-part/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
}
},
"supports": {
"align": true,
"html": false
}
}
14 changes: 0 additions & 14 deletions packages/edit-site/src/components/block-editor/style.scss
Original file line number Diff line number Diff line change
@@ -1,17 +1,3 @@
.edit-site-block-editor__block-list {
padding-bottom: $grid-unit-30;
padding-top: $grid-unit-30 + 5;

padding-left: $block-padding;
padding-right: $block-padding;

// Full-wide. (to account for the padddings added above)
.wp-block[data-align="full"] {
margin-left: -$block-padding;
margin-right: -$block-padding;
}
}

// The button element easily inherits styles that are meant for the editor style.
// These rules enhance the specificity to reduce that inheritance.
// This is duplicated in visual-editor.
Expand Down

0 comments on commit 266ca8f

Please sign in to comment.