From 01e85c62362114370e9d4ecb423a0a12c43e49aa Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 12 Jan 2023 15:17:15 +1100 Subject: [PATCH 1/4] Try removing default align-items styles from flex layout --- lib/block-supports/layout.php | 5 ----- lib/theme.json | 3 +-- packages/block-editor/src/layouts/flex.js | 7 ++++--- packages/block-library/src/social-links/style.scss | 5 +++++ 4 files changed, 10 insertions(+), 10 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 33f616ac7ee8d2..51204c79de6cfe 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -267,11 +267,6 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support 'selector' => $selector, 'declarations' => array( 'align-items' => $justify_content_options[ $layout['justifyContent'] ] ), ); - } else { - $layout_styles[] = array( - 'selector' => $selector, - 'declarations' => array( 'align-items' => 'flex-start' ), - ); } if ( ! empty( $layout['verticalAlignment'] ) && array_key_exists( $layout['verticalAlignment'], $vertical_alignment_options ) ) { $layout_styles[] = array( diff --git a/lib/theme.json b/lib/theme.json index 88befe6dff2ed0..6cd74c11c3ef4b 100644 --- a/lib/theme.json +++ b/lib/theme.json @@ -346,8 +346,7 @@ { "selector": "", "rules": { - "flex-wrap": "wrap", - "align-items": "center" + "flex-wrap": "wrap" } }, { diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index fd6f377ea591d1..e081ff2380b2d7 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -138,8 +138,7 @@ export default { : 'wrap'; const verticalAlignment = verticalAlignmentMap[ layout.verticalAlignment ]; - const alignItems = - alignItemsMap[ layout.justifyContent ] || alignItemsMap.left; + const alignItems = alignItemsMap[ layout.justifyContent ]; let output = ''; const rules = []; @@ -160,7 +159,9 @@ export default { rules.push( `justify-content: ${ verticalAlignment }` ); } rules.push( 'flex-direction: column' ); - rules.push( `align-items: ${ alignItems }` ); + if ( alignItems ) { + rules.push( `align-items: ${ alignItems }` ); + } } if ( rules.length ) { diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 582edd4f22bac6..70d00afc7c7a0d 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -12,6 +12,11 @@ // Unset background colors that can be inherited from Global Styles. background: none; + // Alignment style needed for vertical orientation so buttons don't stretch full width. + &.is-vertical { + align-items: flex-start; + } + // Some themes add underlines, false underlines (via shadows), and borders to . .wp-social-link a, .wp-social-link a:hover { From 6a91fe55be7a6f8d8726017531c12a82e1690afb Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 12 Jan 2023 15:36:45 +1100 Subject: [PATCH 2/4] Try removing gallery block fallback. --- packages/block-library/src/gallery/style.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index 3f5a462e3206c0..46cdfa55d819cb 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -1,11 +1,6 @@ // Import styles for rendering the static content of deprecated gallery versions. @import "./deprecated.scss"; -// The following is a temporary override until flex layout supports -// an align items setting of normal. -figure.wp-block-gallery.has-nested-images { - align-items: normal; -} // Styles for current version of gallery block. .wp-block-gallery.has-nested-images { // Need bogus :not(#individual-image) to override long :not() From ae30c09d3b8de0310d14b694ae449f09d71c20b9 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 24 Apr 2023 14:39:52 +1000 Subject: [PATCH 3/4] Fix default control selection --- packages/block-editor/src/layouts/flex.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index e081ff2380b2d7..44888b2e47de84 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -197,12 +197,7 @@ function FlexLayoutVerticalAlignmentControl( { } ) { const { orientation = 'horizontal' } = layout; - const defaultVerticalAlignment = - orientation === 'horizontal' - ? verticalAlignmentMap.center - : verticalAlignmentMap.top; - - const { verticalAlignment = defaultVerticalAlignment } = layout; + const { verticalAlignment = 'top' } = layout; const onVerticalAlignmentChange = ( value ) => { onChange( { @@ -264,7 +259,10 @@ function FlexLayoutJustifyContentControl( { onChange, isToolbar = false, } ) { - const { justifyContent = 'left', orientation = 'horizontal' } = layout; + const { orientation = 'horizontal' } = layout; + const defaultJustification = + orientation === 'horizontal' ? 'left' : 'stretch'; + const { justifyContent = defaultJustification } = layout; const onJustificationChange = ( value ) => { onChange( { ...layout, From 95e41d7ab03f00b29fa6ff067ec4a33a955f06da Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 24 Apr 2023 14:58:42 +1000 Subject: [PATCH 4/4] Add default justification for social icons instead of CSS override --- packages/block-library/src/social-links/block.json | 3 ++- packages/block-library/src/social-links/style.scss | 5 ----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json index a7707cf1951345..ca28615d7dbe89 100644 --- a/packages/block-library/src/social-links/block.json +++ b/packages/block-library/src/social-links/block.json @@ -53,7 +53,8 @@ "allowInheriting": false, "allowVerticalAlignment": false, "default": { - "type": "flex" + "type": "flex", + "justifyContent": "left" } }, "color": { diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 70d00afc7c7a0d..582edd4f22bac6 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -12,11 +12,6 @@ // Unset background colors that can be inherited from Global Styles. background: none; - // Alignment style needed for vertical orientation so buttons don't stretch full width. - &.is-vertical { - align-items: flex-start; - } - // Some themes add underlines, false underlines (via shadows), and borders to . .wp-social-link a, .wp-social-link a:hover {