From db0f9c1b516b0755744d891ca595d572722c86cf Mon Sep 17 00:00:00 2001 From: Matt Wiebe Date: Thu, 21 Sep 2023 12:55:14 -0500 Subject: [PATCH] Follow Me: truncate long blog titles and handles (#453) Also add typography control Co-authored-by: Matthias Pfefferle --- build/follow-me/block.json | 6 ++++++ build/follow-me/style-index.css | 2 +- src/follow-me/block.json | 6 ++++++ src/follow-me/style.scss | 15 ++++++++++++--- 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/build/follow-me/block.json b/build/follow-me/block.json index b9bc81e..8dcb824 100644 --- a/build/follow-me/block.json +++ b/build/follow-me/block.json @@ -24,6 +24,12 @@ "width": true, "color": true, "style": true + }, + "typography": { + "fontSize": true, + "__experimentalDefaultControls": { + "fontSize": true + } } }, "attributes": { diff --git a/build/follow-me/style-index.css b/build/follow-me/style-index.css index 2d3e377..524d0e0 100644 --- a/build/follow-me/style-index.css +++ b/build/follow-me/style-index.css @@ -1 +1 @@ -.activitypub-follow-me-block-wrapper .activitypub-profile,.editor-styles-wrapper .activitypub-profile{align-items:self-start;display:flex;padding:1rem}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__avatar,.editor-styles-wrapper .activitypub-profile .activitypub-profile__avatar{border-radius:50%;height:75px;margin-right:1rem;width:75px}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__name,.editor-styles-wrapper .activitypub-profile .activitypub-profile__name{font-size:var(--wp--preset--font-size--large);line-height:1;margin:0}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__follow,.editor-styles-wrapper .activitypub-profile .activitypub-profile__follow{align-self:center;background-color:var(--wp--preset--color--black);color:var(--wp--preset--color--white);margin-left:auto}.activitypub-follow-me__dialog{max-width:30em}.activitypub-follow-me__dialog h4{line-height:1;margin:0}.activitypub-follow-me__dialog .apmfd__section{margin-bottom:2em}.activitypub-follow-me__dialog .apfmd-description{font-size:var(--wp--preset--font-size--normal,.75rem);margin:.33em 0 1em}.activitypub-follow-me__dialog .apfmd__button-group{display:flex;justify-content:flex-end}.activitypub-follow-me__dialog .apfmd__button-group svg{height:21px;margin-right:.5em;width:21px}.activitypub-follow-me__dialog .apfmd__button-group input{flex:1;padding-left:1em;padding-right:1em} +.activitypub-follow-me-block-wrapper .activitypub-profile,.editor-styles-wrapper .activitypub-profile{align-items:self-start;display:flex;padding:1rem}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__avatar,.editor-styles-wrapper .activitypub-profile .activitypub-profile__avatar{border-radius:50%;height:75px;margin-right:1rem;width:75px}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__content,.editor-styles-wrapper .activitypub-profile .activitypub-profile__content{flex:1;min-width:0}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__handle,.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__name,.editor-styles-wrapper .activitypub-profile .activitypub-profile__handle,.editor-styles-wrapper .activitypub-profile .activitypub-profile__name{line-height:1;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__name,.editor-styles-wrapper .activitypub-profile .activitypub-profile__name{font-size:1.25em}.activitypub-follow-me-block-wrapper .activitypub-profile .activitypub-profile__follow,.editor-styles-wrapper .activitypub-profile .activitypub-profile__follow{align-self:center;background-color:var(--wp--preset--color--black);color:var(--wp--preset--color--white);margin-left:1rem}.activitypub-follow-me__dialog{max-width:30em}.activitypub-follow-me__dialog h4{line-height:1;margin:0}.activitypub-follow-me__dialog .apmfd__section{margin-bottom:2em}.activitypub-follow-me__dialog .apfmd-description{font-size:var(--wp--preset--font-size--normal,.75rem);margin:.33em 0 1em}.activitypub-follow-me__dialog .apfmd__button-group{display:flex;justify-content:flex-end}.activitypub-follow-me__dialog .apfmd__button-group svg{height:21px;margin-right:.5em;width:21px}.activitypub-follow-me__dialog .apfmd__button-group input{flex:1;padding-left:1em;padding-right:1em} diff --git a/src/follow-me/block.json b/src/follow-me/block.json index a728f13..fba3a2f 100644 --- a/src/follow-me/block.json +++ b/src/follow-me/block.json @@ -24,6 +24,12 @@ "width": true, "color": true, "style": true + }, + "typography": { + "fontSize": true, + "__experimentalDefaultControls": { + "fontSize": true + } } }, "attributes": { diff --git a/src/follow-me/style.scss b/src/follow-me/style.scss index 73a7812..13add04 100644 --- a/src/follow-me/style.scss +++ b/src/follow-me/style.scss @@ -10,13 +10,22 @@ margin-right: 1rem; border-radius: 50%; } - .activitypub-profile__name { + .activitypub-profile__content { + flex: 1; + min-width: 0; + } + .activitypub-profile__name, .activitypub-profile__handle { margin: 0; line-height: 1; - font-size: var( --wp--preset--font-size--large ); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + .activitypub-profile__name { + font-size: 1.25em; } .activitypub-profile__follow { - margin-left: auto; + margin-left: 1rem; align-self: center; background-color: var(--wp--preset--color--black); color: var(--wp--preset--color--white);