Follow Me: truncate long blog titles and handles (#453)

Also add typography control

Co-authored-by: Matthias Pfefferle <[email protected]>

Author: mattwiebe

build/follow-me/block.json

@@ -24,6 +24,12 @@
       "width": true,
       "color": true,
       "style": true
+    },
+    "typography": {
+      "fontSize": true,
+      "__experimentalDefaultControls": {
+        "fontSize": true
+      }
     }
   },
   "attributes": {

build/follow-me/style-index.css

@@ -24,6 +24,12 @@
 			"width": true,
 			"color": true,
 			"style": true
+		},
+		"typography": {
+			"fontSize": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"attributes": {

src/follow-me/block.json

@@ -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);