From 8291de71e73cdd3690ce5766c75cfb0a9650b5a6 Mon Sep 17 00:00:00 2001 From: StevenDufresne Date: Mon, 24 Jun 2024 13:54:11 +0900 Subject: [PATCH 01/23] Move and adjust ratings-bars and ratings-stars. --- mu-plugins/blocks/ratings-bars/index.php | 20 ++++++ mu-plugins/blocks/ratings-bars/render.php | 42 ++++++++++++ mu-plugins/blocks/ratings-bars/src/block.json | 39 +++++++++++ mu-plugins/blocks/ratings-bars/src/edit.js | 20 ++++++ mu-plugins/blocks/ratings-bars/src/index.js | 16 +++++ mu-plugins/blocks/ratings-bars/src/style.scss | 65 +++++++++++++++++++ mu-plugins/blocks/ratings-stars/index.php | 22 +++++++ mu-plugins/blocks/ratings-stars/render.php | 41 ++++++++++++ .../blocks/ratings-stars/src/block.json | 17 +++++ mu-plugins/blocks/ratings-stars/src/edit.js | 20 ++++++ mu-plugins/blocks/ratings-stars/src/index.js | 16 +++++ .../blocks/ratings-stars/src/style.scss | 29 +++++++++ 12 files changed, 347 insertions(+) create mode 100644 mu-plugins/blocks/ratings-bars/index.php create mode 100644 mu-plugins/blocks/ratings-bars/render.php create mode 100644 mu-plugins/blocks/ratings-bars/src/block.json create mode 100644 mu-plugins/blocks/ratings-bars/src/edit.js create mode 100644 mu-plugins/blocks/ratings-bars/src/index.js create mode 100644 mu-plugins/blocks/ratings-bars/src/style.scss create mode 100644 mu-plugins/blocks/ratings-stars/index.php create mode 100644 mu-plugins/blocks/ratings-stars/render.php create mode 100644 mu-plugins/blocks/ratings-stars/src/block.json create mode 100644 mu-plugins/blocks/ratings-stars/src/edit.js create mode 100644 mu-plugins/blocks/ratings-stars/src/index.js create mode 100644 mu-plugins/blocks/ratings-stars/src/style.scss diff --git a/mu-plugins/blocks/ratings-bars/index.php b/mu-plugins/blocks/ratings-bars/index.php new file mode 100644 index 000000000..d536fd4b6 --- /dev/null +++ b/mu-plugins/blocks/ratings-bars/index.php @@ -0,0 +1,20 @@ + + diff --git a/mu-plugins/blocks/ratings-bars/src/block.json b/mu-plugins/blocks/ratings-bars/src/block.json new file mode 100644 index 000000000..9f157229b --- /dev/null +++ b/mu-plugins/blocks/ratings-bars/src/block.json @@ -0,0 +1,39 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "wporg/ratings-bars", + "version": "0.1.0", + "title": "Ratings (bars)", + "category": "design", + "icon": "", + "description": "The breakdown of ratings displayed as bars for each rating value.", + "textdomain": "wporg", + "supports": { + "html": false + }, + "attributes": { + "num_ratings": { + "type": "number", + "default": 0 + }, + "ratings": { + "type": "array", + "default": [] + }, + "slug": { + "type": "string", + "default": "" + }, + "support_url": { + "type": "string", + "default": "" + }, + "type": { + "type": "string", + "default": 0 + } + }, + "editorScript": "file:./index.js", + "style": "file:./style-index.css", + "render": "file:../render.php" +} diff --git a/mu-plugins/blocks/ratings-bars/src/edit.js b/mu-plugins/blocks/ratings-bars/src/edit.js new file mode 100644 index 000000000..62679697b --- /dev/null +++ b/mu-plugins/blocks/ratings-bars/src/edit.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; +import ServerSideRender from '@wordpress/server-side-render'; + +export default function Edit( { name, attributes, context } ) { + const blockProps = useBlockProps(); + const { postId } = context; + return ( +
+ +
+ ); +} diff --git a/mu-plugins/blocks/ratings-bars/src/index.js b/mu-plugins/blocks/ratings-bars/src/index.js new file mode 100644 index 000000000..5d6da2ae2 --- /dev/null +++ b/mu-plugins/blocks/ratings-bars/src/index.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import Edit from './edit'; +import metadata from './block.json'; +import './style.scss'; + +registerBlockType( metadata.name, { + edit: Edit, + save: () => null, +} ); diff --git a/mu-plugins/blocks/ratings-bars/src/style.scss b/mu-plugins/blocks/ratings-bars/src/style.scss new file mode 100644 index 000000000..a52b6aa48 --- /dev/null +++ b/mu-plugins/blocks/ratings-bars/src/style.scss @@ -0,0 +1,65 @@ +.wp-block-wporg-ratings-bars { + list-style: none; + padding-inline-start: unset; +} + +.wporg-ratings-bars__bar { + a { + margin-bottom: 4px; + display: flex; + align-items: center; + gap: var(--wp--preset--spacing--10); + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + &:last-child a { + margin-bottom: 0; + } +} + +.wporg-ratings-bars__bar-label { + flex-basis: 4em; + flex-shrink: 0; +} + +.wporg-ratings-bars__bar-count { + flex-basis: 2em; + flex-shrink: 0; + text-align: right; +} + +.wporg-ratings-bars__bar-background { + display: inline-block; + background-color: var(--wp--preset--color--light-grey-2); + position: relative; + width: 100%; + height: var(--wp--preset--spacing--20); +} + +.wporg-ratings-bars__bar-foreground { + position: absolute; + inset: 0; + right: auto; + background-color: var(--wp--custom--wporg-ratings-stars--color--fill); +} + +@supports (grid-template-columns: subgrid) { + .wp-block-wporg-ratings-bars { + display: grid; + gap: 4px var(--wp--preset--spacing--10); + grid-template-columns: auto 1fr auto; + + .wporg-ratings-bars__bar, + .wporg-ratings-bars__bar a { + display: grid; + grid-column: span 3; + grid-template-columns: subgrid; + margin-bottom: unset; + gap: unset; + } + } +} diff --git a/mu-plugins/blocks/ratings-stars/index.php b/mu-plugins/blocks/ratings-stars/index.php new file mode 100644 index 000000000..119d329c8 --- /dev/null +++ b/mu-plugins/blocks/ratings-stars/index.php @@ -0,0 +1,22 @@ + +
> + + + +
+ +
+ +
+ '; + } else if ( $i + 0.5 === $display_rating ) { + echo ''; + } else { + echo ''; + } + } + ?> +
+ +
+ ' . $display_rating . '' // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped + ); + ?> +
+ +
diff --git a/mu-plugins/blocks/ratings-stars/src/block.json b/mu-plugins/blocks/ratings-stars/src/block.json new file mode 100644 index 000000000..6ad0e00ba --- /dev/null +++ b/mu-plugins/blocks/ratings-stars/src/block.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "wporg/ratings-stars", + "version": "0.1.0", + "title": "Ratings (stars)", + "category": "design", + "icon": "", + "description": "The average rating displayed as stars.", + "textdomain": "wporg", + "supports": { + "html": false + }, + "editorScript": "file:./index.js", + "style": "file:./style-index.css", + "render": "file:./render.php" +} diff --git a/mu-plugins/blocks/ratings-stars/src/edit.js b/mu-plugins/blocks/ratings-stars/src/edit.js new file mode 100644 index 000000000..62679697b --- /dev/null +++ b/mu-plugins/blocks/ratings-stars/src/edit.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; +import ServerSideRender from '@wordpress/server-side-render'; + +export default function Edit( { name, attributes, context } ) { + const blockProps = useBlockProps(); + const { postId } = context; + return ( +
+ +
+ ); +} diff --git a/mu-plugins/blocks/ratings-stars/src/index.js b/mu-plugins/blocks/ratings-stars/src/index.js new file mode 100644 index 000000000..5d6da2ae2 --- /dev/null +++ b/mu-plugins/blocks/ratings-stars/src/index.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import Edit from './edit'; +import metadata from './block.json'; +import './style.scss'; + +registerBlockType( metadata.name, { + edit: Edit, + save: () => null, +} ); diff --git a/mu-plugins/blocks/ratings-stars/src/style.scss b/mu-plugins/blocks/ratings-stars/src/style.scss new file mode 100644 index 000000000..bffd76a07 --- /dev/null +++ b/mu-plugins/blocks/ratings-stars/src/style.scss @@ -0,0 +1,29 @@ +.wp-block-wporg-ratings-stars { + display: flex; + align-items: center; +} + +.wporg-ratings-stars__icons { + display: inline-flex; + + svg { + height: 32px; + width: 32px; + margin-inline-start: -6px; + fill: var(--wp--custom--wporg-ratings-stars--color--fill); + } + + // Flip the half-star for RTL views. + .rtl & .is-star-half { + transform: rotateY(-180deg); + } +} + +.wporg-ratings-stars__label { + font-size: var(--wp--preset--font-size--small); + color: var(--wp--preset--color--charcoal-4); + + .wporg-ratings-stars__icons + & { + margin-inline-start: 0.5em; + } +} From 302e867fbf9ca672ee5f46ce68f79add4c925c57 Mon Sep 17 00:00:00 2001 From: StevenDufresne Date: Mon, 24 Jun 2024 13:56:43 +0900 Subject: [PATCH 02/23] Remove the empty space. --- mu-plugins/blocks/ratings-stars/index.php | 2 -- 1 file changed, 2 deletions(-) diff --git a/mu-plugins/blocks/ratings-stars/index.php b/mu-plugins/blocks/ratings-stars/index.php index 119d329c8..60f91c133 100644 --- a/mu-plugins/blocks/ratings-stars/index.php +++ b/mu-plugins/blocks/ratings-stars/index.php @@ -18,5 +18,3 @@ function init() { register_block_type( __DIR__ . '/build' ); } - - From c2ecb821ff830c5edc68e419e91fe979ef8362d7 Mon Sep 17 00:00:00 2001 From: StevenDufresne Date: Mon, 24 Jun 2024 13:57:02 +0900 Subject: [PATCH 03/23] Add blocks to loader. --- mu-plugins/loader.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/mu-plugins/loader.php b/mu-plugins/loader.php index 486a31bc9..369d11395 100644 --- a/mu-plugins/loader.php +++ b/mu-plugins/loader.php @@ -40,6 +40,8 @@ require_once __DIR__ . '/blocks/query-filter/index.php'; require_once __DIR__ . '/blocks/query-has-results/index.php'; require_once __DIR__ . '/blocks/query-total/index.php'; +require_once __DIR__ . '/blocks/rating-bars/index.php'; +require_once __DIR__ . '/blocks/ratings-stars/index.php'; require_once __DIR__ . '/blocks/sidebar-container/index.php'; require_once __DIR__ . '/blocks/screenshot-preview/block.php'; require_once __DIR__ . '/blocks/screenshot-preview-block/block.php'; From 188309944dbb0e5dab075bec96100c828e84b432 Mon Sep 17 00:00:00 2001 From: StevenDufresne Date: Mon, 24 Jun 2024 14:00:18 +0900 Subject: [PATCH 04/23] Remove the edit file. --- mu-plugins/blocks/ratings-bars/src/edit.js | 20 -------------------- mu-plugins/blocks/ratings-bars/src/index.js | 9 ++++++++- mu-plugins/blocks/ratings-stars/src/edit.js | 20 -------------------- mu-plugins/blocks/ratings-stars/src/index.js | 9 ++++++++- 4 files changed, 16 insertions(+), 42 deletions(-) delete mode 100644 mu-plugins/blocks/ratings-bars/src/edit.js delete mode 100644 mu-plugins/blocks/ratings-stars/src/edit.js diff --git a/mu-plugins/blocks/ratings-bars/src/edit.js b/mu-plugins/blocks/ratings-bars/src/edit.js deleted file mode 100644 index 62679697b..000000000 --- a/mu-plugins/blocks/ratings-bars/src/edit.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * WordPress dependencies - */ -import { useBlockProps } from '@wordpress/block-editor'; -import ServerSideRender from '@wordpress/server-side-render'; - -export default function Edit( { name, attributes, context } ) { - const blockProps = useBlockProps(); - const { postId } = context; - return ( -
- -
- ); -} diff --git a/mu-plugins/blocks/ratings-bars/src/index.js b/mu-plugins/blocks/ratings-bars/src/index.js index 5d6da2ae2..1e574b4f5 100644 --- a/mu-plugins/blocks/ratings-bars/src/index.js +++ b/mu-plugins/blocks/ratings-bars/src/index.js @@ -6,10 +6,17 @@ import { registerBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ -import Edit from './edit'; import metadata from './block.json'; import './style.scss'; +function Edit( { attributes, name } ) { + return ( +
+ +
+ ); +} + registerBlockType( metadata.name, { edit: Edit, save: () => null, diff --git a/mu-plugins/blocks/ratings-stars/src/edit.js b/mu-plugins/blocks/ratings-stars/src/edit.js deleted file mode 100644 index 62679697b..000000000 --- a/mu-plugins/blocks/ratings-stars/src/edit.js +++ /dev/null @@ -1,20 +0,0 @@ -/** - * WordPress dependencies - */ -import { useBlockProps } from '@wordpress/block-editor'; -import ServerSideRender from '@wordpress/server-side-render'; - -export default function Edit( { name, attributes, context } ) { - const blockProps = useBlockProps(); - const { postId } = context; - return ( -
- -
- ); -} diff --git a/mu-plugins/blocks/ratings-stars/src/index.js b/mu-plugins/blocks/ratings-stars/src/index.js index 5d6da2ae2..1e574b4f5 100644 --- a/mu-plugins/blocks/ratings-stars/src/index.js +++ b/mu-plugins/blocks/ratings-stars/src/index.js @@ -6,10 +6,17 @@ import { registerBlockType } from '@wordpress/blocks'; /** * Internal dependencies */ -import Edit from './edit'; import metadata from './block.json'; import './style.scss'; +function Edit( { attributes, name } ) { + return ( +
+ +
+ ); +} + registerBlockType( metadata.name, { edit: Edit, save: () => null, From d4d83138a5679d33e80d96a73bfaf69aa2e892f2 Mon Sep 17 00:00:00 2001 From: StevenDufresne Date: Mon, 24 Jun 2024 14:08:45 +0900 Subject: [PATCH 05/23] Update support url and namespaces. --- mu-plugins/blocks/ratings-bars/index.php | 2 +- mu-plugins/blocks/ratings-bars/render.php | 4 +--- mu-plugins/blocks/ratings-stars/render.php | 1 - 3 files changed, 2 insertions(+), 5 deletions(-) diff --git a/mu-plugins/blocks/ratings-bars/index.php b/mu-plugins/blocks/ratings-bars/index.php index d536fd4b6..e9329933d 100644 --- a/mu-plugins/blocks/ratings-bars/index.php +++ b/mu-plugins/blocks/ratings-bars/index.php @@ -6,7 +6,7 @@ * @package wporg */ -namespace WordPressdotorg\Theme\Theme_Directory_2024\Ratings_Bars_Block; +namespace WordPressdotorg\Theme\MU_Plugins\Ratings_Bars_Block; defined( 'WPINC' ) || die(); diff --git a/mu-plugins/blocks/ratings-bars/render.php b/mu-plugins/blocks/ratings-bars/render.php index e6b3cd77c..fd6ac61ba 100644 --- a/mu-plugins/blocks/ratings-bars/render.php +++ b/mu-plugins/blocks/ratings-bars/render.php @@ -1,7 +1,5 @@
  • - +
    > From 0d11b4daea1e421a426fec35feafd991e25f630a Mon Sep 17 00:00:00 2001 From: StevenDufresne Date: Mon, 24 Jun 2024 14:09:36 +0900 Subject: [PATCH 06/23] Update namespaces. --- mu-plugins/blocks/ratings-bars/render.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/mu-plugins/blocks/ratings-bars/render.php b/mu-plugins/blocks/ratings-bars/render.php index fd6ac61ba..99a0c1e5b 100644 --- a/mu-plugins/blocks/ratings-bars/render.php +++ b/mu-plugins/blocks/ratings-bars/render.php @@ -21,13 +21,13 @@
    > diff --git a/mu-plugins/blocks/ratings-stars/src/index.js b/mu-plugins/blocks/ratings-stars/src/index.js index 1e574b4f5..4f6215058 100644 --- a/mu-plugins/blocks/ratings-stars/src/index.js +++ b/mu-plugins/blocks/ratings-stars/src/index.js @@ -2,6 +2,8 @@ * WordPress dependencies */ import { registerBlockType } from '@wordpress/blocks'; +import ServerSideRender from '@wordpress/server-side-render'; +import { useBlockProps } from '@wordpress/block-editor'; /** * Internal dependencies From c271f8bc2e46b8a441616923758b409910e61440 Mon Sep 17 00:00:00 2001 From: StevenDufresne Date: Mon, 24 Jun 2024 14:45:50 +0900 Subject: [PATCH 10/23] More protection. --- mu-plugins/blocks/ratings-bars/render.php | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/mu-plugins/blocks/ratings-bars/render.php b/mu-plugins/blocks/ratings-bars/render.php index d4fec9f21..1e644ff7d 100644 --- a/mu-plugins/blocks/ratings-bars/render.php +++ b/mu-plugins/blocks/ratings-bars/render.php @@ -2,7 +2,12 @@ $attributes = apply_filters( 'wporg_block_ratings_bars', $attributes ); -if ( ! isset( $attributes['num_ratings'] ) ) { +if ( + ! isset( $attributes['num_ratings'] ) || + ! isset( $attributes['ratings'] ) || + ! isset( $attributes['support_url'] ) || + ! isset( $attributes['slug'] ) + ) { return; } From 7902ae6db6520535a8d9893abd509364584d63fa Mon Sep 17 00:00:00 2001 From: StevenDufresne Date: Mon, 24 Jun 2024 14:48:08 +0900 Subject: [PATCH 11/23] Update the string. --- mu-plugins/blocks/ratings-stars/render.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mu-plugins/blocks/ratings-stars/render.php b/mu-plugins/blocks/ratings-stars/render.php index 49cfcfe8f..598434d45 100644 --- a/mu-plugins/blocks/ratings-stars/render.php +++ b/mu-plugins/blocks/ratings-stars/render.php @@ -12,7 +12,7 @@
    - +
    From 798fabac75d745c5623bccded7400164e3fb8bc9 Mon Sep 17 00:00:00 2001 From: StevenDufresne Date: Mon, 24 Jun 2024 14:56:40 +0900 Subject: [PATCH 12/23] Add css defaults for rating stars. --- mu-plugins/blocks/ratings-bars/src/style.scss | 2 +- mu-plugins/blocks/ratings-stars/src/style.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/mu-plugins/blocks/ratings-bars/src/style.scss b/mu-plugins/blocks/ratings-bars/src/style.scss index a52b6aa48..d066b8eb3 100644 --- a/mu-plugins/blocks/ratings-bars/src/style.scss +++ b/mu-plugins/blocks/ratings-bars/src/style.scss @@ -44,7 +44,7 @@ position: absolute; inset: 0; right: auto; - background-color: var(--wp--custom--wporg-ratings-stars--color--fill); + background-color: var(--wp--custom--wporg-ratings-stars--color--fill, #e26f56); } @supports (grid-template-columns: subgrid) { diff --git a/mu-plugins/blocks/ratings-stars/src/style.scss b/mu-plugins/blocks/ratings-stars/src/style.scss index bffd76a07..6e4e7bc8b 100644 --- a/mu-plugins/blocks/ratings-stars/src/style.scss +++ b/mu-plugins/blocks/ratings-stars/src/style.scss @@ -10,7 +10,7 @@ height: 32px; width: 32px; margin-inline-start: -6px; - fill: var(--wp--custom--wporg-ratings-stars--color--fill); + fill: var(--wp--custom--wporg-ratings-stars--color--fill, #e26f56); } // Flip the half-star for RTL views. From a0f304890b056717ead5d63997457c13f31b1864 Mon Sep 17 00:00:00 2001 From: StevenDufresne Date: Mon, 24 Jun 2024 15:09:53 +0900 Subject: [PATCH 13/23] Update stars logic. --- mu-plugins/blocks/ratings-bars/render.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/mu-plugins/blocks/ratings-bars/render.php b/mu-plugins/blocks/ratings-bars/render.php index 1e644ff7d..6f35611f6 100644 --- a/mu-plugins/blocks/ratings-bars/render.php +++ b/mu-plugins/blocks/ratings-bars/render.php @@ -15,10 +15,10 @@