From d48b7e6449345566a469ce61b35e90a65d9fe636 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 28 Jul 2022 08:49:10 +0100 Subject: [PATCH 1/5] Move the next link to the right when it's the only one displayed --- packages/block-library/src/query-pagination/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/query-pagination/style.scss b/packages/block-library/src/query-pagination/style.scss index 95da9e1231f5d6..d9cf5f5a5adcf1 100644 --- a/packages/block-library/src/query-pagination/style.scss +++ b/packages/block-library/src/query-pagination/style.scss @@ -13,6 +13,10 @@ $pagination-margin: 0.5em; margin-right: 0; } } + &.is-content-justification-space-between > .wp-block-query-pagination-next { + margin-left: auto; + } + .wp-block-query-pagination-previous-arrow { margin-right: 1ch; display: inline-block; // Needed so that the transform works. From 01983eea3da0708fa19d12fc13b34ec74b925dcc Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 28 Jul 2022 09:01:09 +0100 Subject: [PATCH 2/5] add explanatory comment --- packages/block-library/src/query-pagination/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/query-pagination/style.scss b/packages/block-library/src/query-pagination/style.scss index d9cf5f5a5adcf1..ef4aad07f4cd40 100644 --- a/packages/block-library/src/query-pagination/style.scss +++ b/packages/block-library/src/query-pagination/style.scss @@ -13,6 +13,10 @@ $pagination-margin: 0.5em; margin-right: 0; } } + + // This moves the next link to the right side of the container, + // which is important when it's the only block displayed + // and the block has a "space-between" justification. &.is-content-justification-space-between > .wp-block-query-pagination-next { margin-left: auto; } From 43870cf4cdb0b5e3c6ae2914ec0657b1ae980df6 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 28 Jul 2022 12:57:39 +0100 Subject: [PATCH 3/5] use margin-inline-start for RTL --- packages/block-library/src/query-pagination/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/query-pagination/style.scss b/packages/block-library/src/query-pagination/style.scss index ef4aad07f4cd40..415c18ae25a5f0 100644 --- a/packages/block-library/src/query-pagination/style.scss +++ b/packages/block-library/src/query-pagination/style.scss @@ -18,7 +18,7 @@ $pagination-margin: 0.5em; // which is important when it's the only block displayed // and the block has a "space-between" justification. &.is-content-justification-space-between > .wp-block-query-pagination-next { - margin-left: auto; + margin-inline-start: auto; } .wp-block-query-pagination-previous-arrow { From 65c9aa472b6f7ce27dd7e1faefa57214aa6c9b44 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 28 Jul 2022 21:42:17 +0100 Subject: [PATCH 4/5] Add margin-inline-end to the previous link --- packages/block-library/src/query-pagination/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/query-pagination/style.scss b/packages/block-library/src/query-pagination/style.scss index 415c18ae25a5f0..77c5edea357950 100644 --- a/packages/block-library/src/query-pagination/style.scss +++ b/packages/block-library/src/query-pagination/style.scss @@ -20,6 +20,10 @@ $pagination-margin: 0.5em; &.is-content-justification-space-between > .wp-block-query-pagination-next { margin-inline-start: auto; } + &.is-content-justification-space-between > .wp-block-query-pagination-previous { + margin-inline-end: auto; + } + .wp-block-query-pagination-previous-arrow { margin-right: 1ch; From 77e9aff2d16bf3305773d9039650f151b6c60658 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 29 Jul 2022 08:46:10 +0100 Subject: [PATCH 5/5] restrict CSS to first and last children --- .../block-library/src/query-pagination/style.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/query-pagination/style.scss b/packages/block-library/src/query-pagination/style.scss index 77c5edea357950..db5e90232532d0 100644 --- a/packages/block-library/src/query-pagination/style.scss +++ b/packages/block-library/src/query-pagination/style.scss @@ -17,11 +17,13 @@ $pagination-margin: 0.5em; // This moves the next link to the right side of the container, // which is important when it's the only block displayed // and the block has a "space-between" justification. - &.is-content-justification-space-between > .wp-block-query-pagination-next { - margin-inline-start: auto; - } - &.is-content-justification-space-between > .wp-block-query-pagination-previous { - margin-inline-end: auto; + &.is-content-justification-space-between { + > .wp-block-query-pagination-next:last-child { + margin-inline-start: auto; + } + > .wp-block-query-pagination-previous:first-child { + margin-inline-end: auto; + } }