[New block] bookmark count

docs/reference-guides/core-blocks.md

@@ -44,6 +44,15 @@ Reuse this design across your site. ([Source](https://github.com/WordPress/guten
 -	**Supports:** interactivity (clientNavigation), ~~customClassName~~, ~~html~~, ~~inserter~~, ~~renaming~~
 -	**Attributes:** content, ref
 
+## Bookmark/Like-count
+
+Displays count of bookmarked/liked posts ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/bookmark-count))
+
+-	**Name:** core/bookmark-count
+-	**Category:** theme
+-	**Supports:** align (full, wide), color (background, gradients, text), interactivity, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+-	**Attributes:** archiveUrl, iconType
+
 ## Button
 
 Prompt visitors to take action with a button-style link. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/button))

lib/blocks.php

@@ -15,6 +15,7 @@ function gutenberg_reregister_core_block_types() {
 		__DIR__ . '/../build/block-library/blocks/' => array(
 			'block_folders' => array(
 				'audio',
+				'bookmark-count',
 				'button',
 				'buttons',
 				'freeform',
@@ -47,6 +48,7 @@ function gutenberg_reregister_core_block_types() {
 			'block_names'   => array(
 				'archives.php'                     => 'core/archives',
 				'avatar.php'                       => 'core/avatar',
+				'bookmark-count.php'               => 'core/bookmark-count',
 				'block.php'                        => 'core/block',
 				'button.php'                       => 'core/button',
 				'calendar.php'                     => 'core/calendar',

packages/block-library/src/bookmark-count/block.json

@@ -0,0 +1,49 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/bookmark-count",
+	"title": "Bookmark/Like-count",
+	"category": "theme",
+	"description": "Displays count of bookmarked/liked posts",
+	"textdomain": "default",
+	"attributes": {
+		"iconType": {
+			"type": "string",
+			"default": "heart"
+		},
+		"archiveUrl": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"supports": {
+		"interactivity": true,
+		"align": [ "wide", "full" ],
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"text": true,
+				"background": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	},
+	"style": "wp-block-bookmark"
+}

packages/block-library/src/bookmark-count/edit.js

@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	BlockControls,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import {
+	ToolbarGroup,
+	ToolbarDropdownMenu,
+	PanelBody,
+	TextControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { bookmark, heart, star } from './icons';
+
+export default function BookmarkEdit( { attributes, setAttributes } ) {
+	const { iconType, archiveUrl } = attributes;
+	const getBookmarkIcon = () => {
+		switch ( iconType ) {
+			case 'bookmark':
+				return bookmark;
+			case 'heart':
+				return heart;
+			case 'star':
+				return star;
+		}
+	};
+	const iconControls = [
+		{
+			role: 'menuitemradio',
+			title: __( 'Heart' ),
+			isActive: iconType === 'heart',
+			icon: heart,
+			onClick: () => {
+				setAttributes( { iconType: 'heart' } );
+			},
+		},
+		{
+			role: 'menuitemradio',
+			title: __( 'Bookmark' ),
+			isActive: iconType === 'bookmark',
+			icon: bookmark,
+			onClick: () => {
+				setAttributes( { iconType: 'bookmark' } );
+			},
+		},
+		{
+			role: 'menuitemradio',
+			title: __( 'Star' ),
+			isActive: iconType === 'star',
+			icon: star,
+			onClick: () => {
+				setAttributes( { iconType: 'star' } );
+			},
+		},
+	];
+
+	return (
+		<div { ...useBlockProps() }>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarDropdownMenu
+						icon={ getBookmarkIcon() }
+						label={ __( 'Change icon' ) }
+						controls={ iconControls }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+
+			<InspectorControls>
+				<PanelBody title={ __( 'Bookmark Settings' ) }>
+					<TextControl
+						label={ __( 'Redirect URL on click' ) }
+						value={ archiveUrl }
+						onChange={ ( value ) =>
+							setAttributes( { archiveUrl: value } )
+						}
+						placeholder="https://example.com"
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+					/>
+				</PanelBody>
+			</InspectorControls>
+			{ getBookmarkIcon() }
+			<span>1</span>
+		</div>
+	);
+}

packages/block-library/src/bookmark-count/icons.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export const bookmark = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+	>
+		<Path d="M6 2H18C18.5523 2 19 2.44772 19 3V21C19 21.5523 18.5523 22 18 22C17.7348 22 17.4804 21.8946 17.2929 21.7071L12 16.4142L6.70711 21.7071C6.51957 21.8946 6.26522 22 6 22C5.44772 22 5 21.5523 5 21V3C5 2.44772 5.44772 2 6 2Z" />
+	</SVG>
+);
+
+export const heart = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+	>
+		<Path d="M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z" />
+	</SVG>
+);
+
+export const star = (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 24 24"
+		width="24"
+		height="24"
+		aria-hidden="true"
+		focusable="false"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2"
+	>
+		<Path d="M12 3L14.4721 8.52786L21 9.23607L16 14.4721L17.4721 21L12 17.5279L6.52786 21L8 14.4721L3 9.23607L9.52786 8.52786L12 3Z" />
+	</SVG>
+);

packages/block-library/src/bookmark-count/index.js

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import initBlock from '../utils/init-block';
+import { bookmark } from './icons';
+
+/* Block settings. */
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon: bookmark,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/bookmark-count/index.php

@@ -0,0 +1,88 @@
+<?php
+/**
+ * Server-side rendering of the `core/bookmark-count` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `bookmark-count` block on the server.
+ *
+ * @since 6.8.0
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string The rendered block content.
+ */
+function render_block_core_bookmark_count( $attributes ) {
+	$post                = get_post();
+	$wrapper_attributes  = get_block_wrapper_attributes();
+	$context             = array( 'post' => array( 'id' => $post->ID ) );
+	$icon_type           = $attributes['iconType'];
+	$bookmark_count_icon = 'M6 2H18C18.5523 2 19 2.44772 19 3V21C19 21.5523 18.5523 22 18 22C17.7348 22 17.4804 21.8946 17.2929 21.7071L12 16.4142L6.70711 21.7071C6.51957 21.8946 6.26522 22 6 22C5.44772 22 5 21.5523 5 21V3C5 2.44772 5.44772 2 6 2Z';
+	$heart_icon          = 'M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z';
+	$star_icon           = 'M12 3L14.4721 8.52786L21 9.23607L16 14.4721L17.4721 21L12 17.5279L6.52786 21L8 14.4721L3 9.23607L9.52786 8.52786L12 3Z';
+
+	switch ( $icon_type ) {
+		case 'bookmark':
+			$icon = $bookmark_count_icon;
+			break;
+		case 'heart':
+			$icon = $heart_icon;
+			break;
+		case 'star':
+			$icon = $star_icon;
+			break;
+		default:
+			$icon = $bookmark_count_icon;
+			break;
+	}
+
+	wp_interactivity_state(
+		'core/bookmark'
+	);
+
+	$context_data = wp_interactivity_data_wp_context( $context );
+	$redirect_url = isset( $attributes['archiveUrl'] ) ? esc_url( $attributes['archiveUrl'] ) : '#';
+
+	return sprintf(
+		"<div
+		data-wp-interactive='core/bookmark'
+		%s
+		%s
+		onclick=\"window.location.href='%s'\"
+		style='cursor: pointer;'
+	>
+		<div
+			data-wp-on--click='actions.redirect'
+			data-wp-class--bookmark-count-active='state.likedPosts.length'
+			style='align-items: center; display: flex;'
+		>
+		<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' aria-hidden='true' focusable='false' fill='none' stroke='currentColor' stroke-width='2'><path d='%s'></path></svg><span class='bookmark-counter' data-wp-text='state.likedPosts.length' ></span>
+		</div>
+	</div>
+	",
+		$wrapper_attributes,
+		$context_data,
+		$redirect_url,
+		$icon
+	);
+}
+
+/**
+ * Registers the `bookmark-count` block.
+ *
+ * @since 6.8.0
+ */
+function register_block_core_bookmark_count() {
+	register_block_type_from_metadata(
+		__DIR__ . '/bookmark-count',
+		array(
+			'render_callback' => 'render_block_core_bookmark_count',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_bookmark_count' );

packages/block-library/src/bookmark-count/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

packages/block-library/src/bookmark-count/style.scss

@@ -0,0 +1,6 @@
+.bookmark-count-active > svg {
+	fill: currentColor;
+}
+.wp-block-bookmark-count + svg {
+	vertical-align: sub;
+}

packages/block-library/src/index.js

@@ -23,6 +23,7 @@ import {
 import * as archives from './archives';
 import * as avatar from './avatar';
 import * as audio from './audio';
+import * as bookmarkCount from './bookmark-count';
 import * as button from './button';
 import * as buttons from './buttons';
 import * as calendar from './calendar';
@@ -143,6 +144,7 @@ const getAllBlocks = () => {
 		// Register all remaining core blocks.
 		archives,
 		audio,
+		bookmarkCount,
 		button,
 		buttons,
 		calendar,

test/integration/fixtures/blocks/core__bookmark-count.html

@@ -0,0 +1,2 @@
+<!-- wp:bookmark-count /-->
+

test/integration/fixtures/blocks/core__bookmark-count.json

@@ -0,0 +1,11 @@
+[
+	{
+		"name": "core/bookmark-count",
+		"isValid": true,
+		"attributes": {
+			"iconType": "heart",
+			"archiveUrl": ""
+		},
+		"innerBlocks": []
+	}
+]

test/integration/fixtures/blocks/core__bookmark-count.parsed.json

@@ -0,0 +1,9 @@
+[
+	{
+		"blockName": "core/bookmark-count",
+		"attrs": {},
+		"innerBlocks": [],
+		"innerHTML": "",
+		"innerContent": []
+	}
+]

test/integration/fixtures/blocks/core__bookmark-count.serialized.html

@@ -0,0 +1 @@
+<!-- wp:bookmark-count /-->