Skip to content

Commit

Permalink
Serve block server side instead of separate view.js, T-25856
Browse files Browse the repository at this point in the history
  • Loading branch information
@ronilaukkarinen
ronilaukkarinen committed Feb 28, 2025
1 parent 16ed61f commit aa96afa
Show file tree
Hide file tree
Showing 15 changed files with 94 additions and 125 deletions.
12 changes: 9 additions & 3 deletions blocks/latest-articles/build/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,25 @@
"apiVersion": 3,
"name": "air-light/latest-articles",
"version": "1.0.0",
"title": "Uusimmat ohjeet",
"title": "Latest articles",
"category": "air-light",
"icon": "grid-view",
"description": "Show latest articles in a grid.",
"example": {},
"supports": {
"html": false,
"html": true,
"align": false
},
"textdomain": "air-light",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"render": "file:./render.php",
"viewScript": "file:./view.js"
"viewScript": "file:./view.js",
"attributes": {
"preview": {
"type": "boolean",
"default": false
}
}
}
2 changes: 1 addition & 1 deletion blocks/latest-articles/build/index-rtl.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
.wp-block-create-block-latest-articles{border:1px dotted red}

2 changes: 1 addition & 1 deletion blocks/latest-articles/build/index.asset.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-data', 'wp-i18n'), 'version' => '76cefaef40ac70803a1a');
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-data', 'wp-i18n', 'wp-server-side-render'), 'version' => '6c4ddfadd3c18d2fb2e5');
2 changes: 1 addition & 1 deletion blocks/latest-articles/build/index.css
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
.wp-block-create-block-latest-articles{border:1px dotted red}

2 changes: 1 addition & 1 deletion blocks/latest-articles/build/index.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

42 changes: 24 additions & 18 deletions blocks/latest-articles/build/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,32 @@
$latest_posts = new WP_Query( $args );

if ( $latest_posts->have_posts() ) : ?>
<div <?php echo get_block_wrapper_attributes( ['class' => 'latest-articles'] ); // phpcs:ignore ?>>
<?php while ( $latest_posts->have_posts() ) :
$latest_posts->the_post(); ?>
<article class="latest-article">
<h3>
<a href="<?php echo esc_url( get_permalink() ); ?>">
<?php the_title(); ?>
</a>
</h3>
<section <?php echo get_block_wrapper_attributes( ['class' => 'latest-articles'] ); // phpcs:ignore ?>>
<div class="container">
<div class="items">
<?php while ( $latest_posts->have_posts() ) :
$latest_posts->the_post(); ?>
<article class="item item-article">
<h3>
<a href="<?php echo esc_url( get_permalink() ); ?>">
<?php the_title(); ?>
</a>
</h3>

<time datetime="<?php echo get_the_date( 'c' ); ?>">
<?php echo get_the_date(); ?>
</time>
<p>
<time datetime="<?php echo get_the_date( 'c' ); ?>">
<?php echo get_the_date(); ?>
</time>
</p>

<div class="excerpt">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
<div class="excerpt">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
</div>
</section>
<?php
wp_reset_postdata();
endif;
2 changes: 1 addition & 1 deletion blocks/latest-articles/build/style-index-rtl.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion blocks/latest-articles/build/style-index.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 9 additions & 3 deletions blocks/latest-articles/src/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,25 @@
"apiVersion": 3,
"name": "air-light/latest-articles",
"version": "1.0.0",
"title": "Uusimmat ohjeet",
"title": "Latest articles",
"category": "air-light",
"icon": "grid-view",
"description": "Show latest articles in a grid.",
"example": {},
"supports": {
"html": false,
"html": true,
"align": false
},
"textdomain": "air-light",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"render": "file:./render.php",
"viewScript": "file:./view.js"
"viewScript": "file:./view.js",
"attributes": {
"preview": {
"type": "boolean",
"default": false
}
}
}
46 changes: 5 additions & 41 deletions blocks/latest-articles/src/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
*/
import { useBlockProps } from '@wordpress/block-editor';
import { useSelect } from '@wordpress/data';
import ServerSideRender from '@wordpress/server-side-render';

/**
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
Expand All @@ -31,51 +32,14 @@ import './editor.scss';
* @return {Element} Element to render.
*/
export default function Edit() {
const posts = useSelect((select) => {
return select('core').getEntityRecords('postType', 'post', {
per_page: 3,
_embed: true
});
}, []);

const blockProps = useBlockProps();

if (!posts) {
return (
<p {...blockProps}>
{__('Loading...', 'air-light')}
</p>
);
}

if (posts.length === 0) {
return (
<p {...blockProps}>
{__('No posts found.', 'air-light')}
</p>
);
}

return (
<div {...blockProps}>
<div className="latest-articles">
{posts.map((post) => (
<article key={post.id} className="latest-article">
<h3>
<a href={post.link}>
{post.title.rendered}
</a>
</h3>
<time dateTime={post.date}>
{new Date(post.date).toLocaleDateString()}
</time>
<div
className="excerpt"
dangerouslySetInnerHTML={{ __html: post.excerpt.rendered }}
/>
</article>
))}
</div>
<ServerSideRender
block="air-light/latest-articles"
attributes={{ preview: true }}
/>
</div>
);
}
4 changes: 0 additions & 4 deletions blocks/latest-articles/src/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,3 @@
*
* Replace them with your own styles or remove the file completely.
*/

.wp-block-create-block-latest-articles {
border: 1px dotted #f00;
}
42 changes: 24 additions & 18 deletions blocks/latest-articles/src/render.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,32 @@
$latest_posts = new WP_Query( $args );

if ( $latest_posts->have_posts() ) : ?>
<div <?php echo get_block_wrapper_attributes( ['class' => 'latest-articles'] ); // phpcs:ignore ?>>
<?php while ( $latest_posts->have_posts() ) :
$latest_posts->the_post(); ?>
<article class="latest-article">
<h3>
<a href="<?php echo esc_url( get_permalink() ); ?>">
<?php the_title(); ?>
</a>
</h3>
<section <?php echo get_block_wrapper_attributes( ['class' => 'latest-articles'] ); // phpcs:ignore ?>>
<div class="container">
<div class="items">
<?php while ( $latest_posts->have_posts() ) :
$latest_posts->the_post(); ?>
<article class="item item-article">
<h3>
<a href="<?php echo esc_url( get_permalink() ); ?>">
<?php the_title(); ?>
</a>
</h3>

<time datetime="<?php echo get_the_date( 'c' ); ?>">
<?php echo get_the_date(); ?>
</time>
<p>
<time datetime="<?php echo get_the_date( 'c' ); ?>">
<?php echo get_the_date(); ?>
</time>
</p>

<div class="excerpt">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
<div class="excerpt">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
</div>
</section>
<?php
wp_reset_postdata();
endif;
44 changes: 14 additions & 30 deletions blocks/latest-articles/src/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,40 +4,24 @@
*
* @package air-light
*/

.wp-block-air-light-latest-articles {
.latest-articles {
.items {
display: grid;
gap: var(--spacing-base);
gap: var(--spacing-grid-gap);
grid-template-columns: repeat(3, 1fr);
}

.latest-article {
h3 {
margin: 0 0 var(--spacing-base);
}

a {
color: var(--color-heading);
text-decoration: none;
}

a:focus,
a:hover {
text-decoration: underline;
}

time {
display: block;
font-size: var(--typography-size-14);
margin-bottom: var(--spacing-small);
color: var(--color-paragraph);
}

.excerpt {
color: var(--color-paragraph);
}
.item {
border: 2px solid var(--color-black);
display: grid;
gap: 0.3125rem;
padding: var(--spacing-text-margin-block);
}

.excerpt p:last-child {
margin-bottom: 0;
}
h3,
p {
line-height: 1.4;
margin: 0;
}
}
2 changes: 1 addition & 1 deletion blocks/latest-articles/src/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#view-script
*/

/* eslint-disable no-console */
/* eslint-disa ble no-console */
console.log("Hello World! (from create-block-latest-articles block)");
/* eslint-enable no-console */
3 changes: 2 additions & 1 deletion gulp/tasks/blocks.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@ function watchBlocks() {
watch([
'blocks/*/src/**/*.js',
'blocks/*/src/**/*.scss',
'blocks/*/*.json'
'blocks/*/src/**/*.php',
'blocks/*/src/**/*.json',
], buildBlocks);
}

Expand Down

0 comments on commit aa96afa

Please sign in to comment.