From a11c83b3e1f20f55ec4d37b43facb521175cc703 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 17 Jun 2021 09:10:06 -0400 Subject: [PATCH 1/4] Enable all alignments for the site title and navigation blocks. --- packages/block-library/src/navigation/block.json | 5 +---- packages/block-library/src/site-title/block.json | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index b640fc3dd1bf6..2bcfd61528760 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -59,10 +59,7 @@ "orientation": "orientation" }, "supports": { - "align": [ - "wide", - "full" - ], + "align": true, "anchor": true, "html": false, "inserter": true, diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json index 97577eefbd082..f052a9848c6e1 100644 --- a/packages/block-library/src/site-title/block.json +++ b/packages/block-library/src/site-title/block.json @@ -15,7 +15,7 @@ } }, "supports": { - "align": [ "wide", "full" ], + "align": true, "html": false, "color": { "gradients": true, From 131fc46648c34d3d3ac2c7b008161cf59f4861d6 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 21 Jun 2021 09:38:34 -0400 Subject: [PATCH 2/4] Try adding styles to fix center alignments. --- packages/block-library/src/navigation/editor.scss | 6 ++++++ packages/block-library/src/navigation/style.scss | 7 +++++++ 2 files changed, 13 insertions(+) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 427595912acf7..4c3ea8d2d590e 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -18,6 +18,12 @@ display: inline-block; } +// Properly center-align the block. +.wp-block[data-align="center"] > .wp-block-navigation { + display: table; + margin-left: auto; + margin-right: auto; +} /** * Submenus. diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 4a5ae3b06c55c..bdfd844471621 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -76,6 +76,13 @@ stroke: currentColor; } } + + // Properly center-align the block. + &.aligncenter { + display: table; + margin-left: auto; + margin-right: auto; + } } From a009004d433415a05baf0b71a5438a3926c7ff58 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 21 Jun 2021 14:07:51 -0400 Subject: [PATCH 3/4] Center-align the site title. --- packages/block-library/src/editor.scss | 1 + packages/block-library/src/site-title/editor.scss | 6 ++++++ packages/block-library/src/site-title/style.scss | 6 ++++++ packages/block-library/src/style.scss | 1 + 4 files changed, 14 insertions(+) create mode 100644 packages/block-library/src/site-title/editor.scss create mode 100644 packages/block-library/src/site-title/style.scss diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 49d89ff9e7c3f..4dfad4ad56b66 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -36,6 +36,7 @@ @import "./separator/editor.scss"; @import "./shortcode/editor.scss"; @import "./site-logo/editor.scss"; +@import "./site-title/editor.scss"; @import "./social-link/editor.scss"; @import "./social-links/editor.scss"; @import "./spacer/editor.scss"; diff --git a/packages/block-library/src/site-title/editor.scss b/packages/block-library/src/site-title/editor.scss new file mode 100644 index 0000000000000..68cc2f97b2da5 --- /dev/null +++ b/packages/block-library/src/site-title/editor.scss @@ -0,0 +1,6 @@ +// Properly center-align the block. +.wp-block[data-align="center"] > .wp-block-site-title { + display: table; + margin-left: auto; + margin-right: auto; +} diff --git a/packages/block-library/src/site-title/style.scss b/packages/block-library/src/site-title/style.scss new file mode 100644 index 0000000000000..4ded105294b16 --- /dev/null +++ b/packages/block-library/src/site-title/style.scss @@ -0,0 +1,6 @@ +// Properly center-align the block. +.wp-block-site-title.aligncenter { + display: table; + margin-left: auto; + margin-right: auto; +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 92e10a3dee23a..425c7d7a0be16 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -41,6 +41,7 @@ @import "./search/style.scss"; @import "./separator/style.scss"; @import "./site-logo/style.scss"; +@import "./site-title/style.scss"; @import "./social-links/style.scss"; @import "./spacer/style.scss"; @import "./tag-cloud/style.scss"; From 403a58befa89bd2418d9ad5785046a030bc94ad3 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 21 Jun 2021 14:55:50 -0400 Subject: [PATCH 4/4] Fix flyout position for right-aligned navigation menus. --- .../block-library/src/navigation/editor.scss | 20 +++++++++++++++++++ .../block-library/src/navigation/style.scss | 5 ++++- 2 files changed, 24 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 4c3ea8d2d590e..463e64581b502 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -61,6 +61,26 @@ } } +// When aligned right, open all submenus leftwards. +// This needs high specificity. +.wp-block[data-align="right"] > .wp-block-navigation .wp-block-page-list > .has-child, +.wp-block[data-align="right"] > .wp-block-navigation > .wp-block-navigation__container .has-child { + + // First submenu. + .submenu-container, + .wp-block-navigation-link__container { + left: auto; + right: 0; + + // Nested submenus. + .submenu-container, + .wp-block-navigation-link__container { + left: auto; + right: 100%; + } + } +} + // Show a submenu when generally dragging (is-dragging-components-draggable) if that // submenu has children (has-child) and is being dragged within (is-dragging-within). .is-dragging-components-draggable .has-child.is-dragging-within { diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index bdfd844471621..fd6f3524c9a37 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -281,11 +281,14 @@ // When justified space-between, open submenus leftward for last menu item. // When justified right, open all submenus leftwards. +// When aligned right, open all submenus leftwards. // This needs high specificity. .wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child, .wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child, .wp-block-navigation.items-justified-right .wp-block-page-list > .has-child, -.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child { +.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child, +.wp-block-navigation.alignright .wp-block-page-list > .has-child, +.wp-block-navigation.alignright > .wp-block-navigation__container .has-child { // First submenu. .submenu-container,