Skip to content

Commit 0a4c052

Browse files
ryelleryelle
authored
Add "Site Link" block (#146)
* Add "Site Link" block * Remove unnecessary block supports * Fix spacing between link and title
1 parent 6240dd7 commit 0a4c052

File tree

6 files changed

+133
-3
lines changed

6 files changed

+133
-3
lines changed

‎source/wp-content/themes/wporg-showcase-2022/functions.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
// Block files
88
require_once __DIR__ . '/src/link-group/index.php';
99
require_once __DIR__ . '/src/site-edit-link/index.php';
10+
require_once __DIR__ . '/src/site-link/index.php';
1011
require_once __DIR__ . '/src/site-meta-list/index.php';
1112
require_once __DIR__ . '/src/site-screenshot/index.php';
1213
require_once __DIR__ . '/inc/shortcodes.php';

‎source/wp-content/themes/wporg-showcase-2022/patterns/page-single.php‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,7 @@
1515
<div class="wp-block-column" style="flex-basis:70%">
1616
<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"bottom":"0"}}},"fontSize":"heading-2"} /-->
1717

18-
<!-- wp:paragraph {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|20"},"padding":{"bottom":"var:preset|spacing|10"}}},"className":"external-link"} -->
19-
<p class="external-link" style="margin-bottom:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--10)"><a href="[domain]" target="_blank" rel="noopener noreferrer">[pretty_domain]</a></p>
20-
<!-- /wp:paragraph -->
18+
<!-- wp:wporg/site-link {"style":{"spacing":{"margin":{"top":"4px"}}}} /-->
2119

2220
<!-- wp:post-content /-->
2321
</div>

‎source/wp-content/themes/wporg-showcase-2022/src/site-link/block.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"$schema": "https://schemas.wp.org/trunk/block.json",
3+
"apiVersion": 2,
4+
"name": "wporg/site-link",
5+
"version": "0.1.0",
6+
"title": "Site Link",
7+
"category": "design",
8+
"icon": "",
9+
"description": "Displays a pretty link to the site.",
10+
"textdomain": "wporg",
11+
"supports": {
12+
"align": true,
13+
"anchor": true,
14+
"color": {
15+
"gradients": false,
16+
"link": true
17+
},
18+
"html": false,
19+
"spacing": {
20+
"blockGap": false,
21+
"margin": true,
22+
"padding": true
23+
},
24+
"typography": {
25+
"fontSize": true,
26+
"lineHeight": true,
27+
"__experimentalFontFamily": true,
28+
"__experimentalFontStyle": true,
29+
"__experimentalFontWeight": true,
30+
"__experimentalLetterSpacing": true,
31+
"__experimentalTextTransform": true
32+
}
33+
},
34+
"usesContext": [ "postId" ],
35+
"editorScript": "file:./index.js",
36+
"style": "file:./style-index.css"
37+
}

‎source/wp-content/themes/wporg-showcase-2022/src/site-link/index.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { registerBlockType } from '@wordpress/blocks';
5+
import ServerSideRender from '@wordpress/server-side-render';
6+
import { useBlockProps } from '@wordpress/block-editor';
7+
8+
/**
9+
* Internal dependencies
10+
*/
11+
import metadata from './block.json';
12+
import './style.scss';
13+
14+
function Edit( { attributes, name } ) {
15+
return (
16+
<div { ...useBlockProps() }>
17+
<ServerSideRender block={ name } attributes={ attributes } skipBlockSupportAttributes />
18+
</div>
19+
);
20+
}
21+
22+
registerBlockType( metadata.name, {
23+
edit: Edit,
24+
save: () => null,
25+
} );

‎source/wp-content/themes/wporg-showcase-2022/src/site-link/index.php‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<?php
2+
/**
3+
* Block Name: Site Link
4+
* Description: Displays a pretty link to the site.
5+
*
6+
* @package wporg
7+
*/
8+
9+
namespace WordPressdotorg\Theme\Showcase_2022\Site_Link;
10+
11+
add_action( 'init', __NAMESPACE__ . '\init' );
12+
13+
/**
14+
* Render the block content.
15+
*
16+
* @param array $attributes Block attributes.
17+
* @param string $content Block default content.
18+
* @param WP_Block $block Block instance.
19+
*
20+
* @return string Returns the block markup.
21+
*/
22+
function render( $attributes, $content, $block ) {
23+
if ( ! isset( $block->context['postId'] ) ) {
24+
return '';
25+
}
26+
27+
$post_id = $block->context['postId'];
28+
$domain = get_post_meta( $post_id, 'domain', true );
29+
if ( ! $domain ) {
30+
return '';
31+
}
32+
33+
$pretty_domain = str_replace( 'www.', '', parse_url( $domain, PHP_URL_HOST ) );
34+
35+
$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'external-link' ) );
36+
return sprintf(
37+
'<p %1$s><a href="%2$s" target="_blank" rel="noopener noreferrer">%3$s</a></p>',
38+
$wrapper_attributes,
39+
esc_url( $domain ),
40+
esc_html( $pretty_domain )
41+
);
42+
}
43+
44+
/**
45+
* Registers the block using the metadata loaded from the `block.json` file.
46+
* Behind the scenes, it registers also all assets so they can be enqueued
47+
* through the block editor in the corresponding context.
48+
*
49+
* @see https://developer.wordpress.org/reference/functions/register_block_type/
50+
*/
51+
function init() {
52+
register_block_type(
53+
dirname( dirname( __DIR__ ) ) . '/build/site-link',
54+
array(
55+
'render_callback' => __NAMESPACE__ . '\render',
56+
)
57+
);
58+
}

‎source/wp-content/themes/wporg-showcase-2022/src/site-link/style.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.wp-block-wporg-site-link {
2+
a {
3+
text-decoration: none;
4+
5+
&:hover,
6+
&:focus {
7+
text-decoration: underline;
8+
text-decoration-thickness: 1px;
9+
}
10+
}
11+
}

0 commit comments

Comments
 (0)