diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index 6b64fe9566291d..63ded62fca6933 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -55,7 +55,7 @@ "orientation": "orientation" }, "supports": { - "align": [ "wide", "full" ], + "align": true, "anchor": true, "html": false, "inserter": true, diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index 427595912acf7a..463e64581b5027 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. @@ -55,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 4a5ae3b06c55c6..fd6f3524c9a372 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; + } } @@ -274,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, diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json index 1d148ac303a190..eb959a59ac2ae1 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, diff --git a/packages/block-library/src/site-title/editor.scss b/packages/block-library/src/site-title/editor.scss index 372a85db2f4b13..ea9990bb048afc 100644 --- a/packages/block-library/src/site-title/editor.scss +++ b/packages/block-library/src/site-title/editor.scss @@ -1,3 +1,10 @@ +// Properly center-align the block. +.wp-block[data-align="center"] > .wp-block-site-title { + display: table; + margin-left: auto; + margin-right: auto; +} + .wp-block-site-title__placeholder { padding: 1em 0; border: 1px dashed; 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 00000000000000..4ded105294b164 --- /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 92e10a3dee23a6..425c7d7a0be160 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";