Skip to content

Commit

Permalink
Remove confusing # from meta-data block, prepend mailto on mail addre…
Browse files Browse the repository at this point in the history
…sses (#677)
  • Loading branch information
albig committed Jul 31, 2024
1 parent 39dcdf2 commit 05703ea
Show file tree
Hide file tree
Showing 5 changed files with 65 additions and 48 deletions.
36 changes: 18 additions & 18 deletions functions/block-patterns/elemente/person-2.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,39 +17,39 @@

<!-- wp:group {"className":"d-flex p-0"} -->
<div class="wp-block-group d-flex p-0"><!-- wp:sunflower/meta-data {"icon":"fab fa-x-twitter"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-bluesky"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-threads"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-instagram"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-tiktok"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-mastodon"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fas fa-envelope"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fas fa-globe"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
<!-- /wp:sunflower/meta-data --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
Expand All @@ -71,39 +71,39 @@

<!-- wp:group {"className":"d-flex p-0"} -->
<div class="wp-block-group d-flex p-0"><!-- wp:sunflower/meta-data {"icon":"fab fa-x-twitter"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-bluesky"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-threads"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-instagram"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-tiktok"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-mastodon"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fas fa-envelope"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fas fa-globe"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
<!-- /wp:sunflower/meta-data --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
Expand Down
54 changes: 27 additions & 27 deletions functions/block-patterns/elemente/person-3.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,39 +17,39 @@

<!-- wp:group {"className":"d-flex p-0"} -->
<div class="wp-block-group d-flex p-0"><!-- wp:sunflower/meta-data {"icon":"fab fa-x-twitter"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-bluesky"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-threads"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-instagram"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-tiktok"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-mastodon"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fas fa-envelope"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fas fa-globe"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
<!-- /wp:sunflower/meta-data --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
Expand All @@ -71,39 +71,39 @@

<!-- wp:group {"className":"d-flex p-0"} -->
<div class="wp-block-group d-flex p-0"><!-- wp:sunflower/meta-data {"icon":"fab fa-x-twitter"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-bluesky"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-threads"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-instagram"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-tiktok"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-mastodon"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fas fa-envelope"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fas fa-globe"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
<!-- /wp:sunflower/meta-data --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
Expand All @@ -125,39 +125,39 @@

<!-- wp:group {"className":"d-flex p-0"} -->
<div class="wp-block-group d-flex p-0"><!-- wp:sunflower/meta-data {"icon":"fab fa-x-twitter"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-x-twitter"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-bluesky"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-bluesky"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-facebook-f"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-threads"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-threads"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-instagram"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-instagram"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-tiktok"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-tiktok"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fab fa-mastodon"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fab fa-mastodon"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fas fa-envelope"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a></div>
<!-- /wp:sunflower/meta-data -->

<!-- wp:sunflower/meta-data {"icon":"fas fa-globe"} -->
<div class="wp-block-sunflower-meta-data"><a href="#" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
<div class="wp-block-sunflower-meta-data"><a href="" target="_blank" rel="noopener noreferrer"><i class="fas fa-globe"></i></a></div>
<!-- /wp:sunflower/meta-data --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
Expand Down
2 changes: 1 addition & 1 deletion src/meta-data/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
},
"url": {
"type": "string",
"default": "#"
"default": ""
}
},
"supports": {
Expand Down
16 changes: 14 additions & 2 deletions src/meta-data/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,19 @@ export default function Edit( { attributes, setAttributes } ) {
setAttributes( { icon: newIcon === undefined ? 'none' : newIcon } );
};

function validateEmail( email ) {
const re = /^[^\s@\/]+@[^\s@]+\.[^\s@]{2,10}$/;
return re.test( email );
}

const onChangeUrl = ( newUrl ) => {
setAttributes( { url: newUrl === undefined ? '#' : newUrl } );
if (
validateEmail( newUrl ) &&
! ( newUrl.substring( 0, 7 ) === 'mailto:' )
) {
newUrl = 'mailto:' + newUrl;
}
setAttributes( { url: newUrl === undefined ? '' : newUrl } );
};

return (
Expand Down Expand Up @@ -140,10 +151,11 @@ export default function Edit( { attributes, setAttributes } ) {
<TextControl
label="URL"
help={ __(
'Target URL the Icon is linked to',
'Target URL the Icon is linked to. For email addresses, use the format mailto:[email protected].',
'sunflower-meta-data'
) }
value={ url }
placeholder={ 'https://gruene.social/@verdigado' }
onChange={ onChangeUrl }
/>
</PanelBody>
Expand Down
5 changes: 5 additions & 0 deletions src/meta-data/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,9 @@

}


}

.d-flex:has(.wp-block-sunflower-meta-data) {
display: flex !important;
}

0 comments on commit 05703ea

Please sign in to comment.