diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 7e031fa525e1ff..c9365bb531891c 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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)) diff --git a/lib/blocks.php b/lib/blocks.php index 342cd25191e689..3720a677168003 100644 --- a/lib/blocks.php +++ b/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', diff --git a/packages/block-library/src/bookmark-count/block.json b/packages/block-library/src/bookmark-count/block.json new file mode 100644 index 00000000000000..a844901f8ea353 --- /dev/null +++ b/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" +} diff --git a/packages/block-library/src/bookmark-count/edit.js b/packages/block-library/src/bookmark-count/edit.js new file mode 100644 index 00000000000000..79bdfae645e537 --- /dev/null +++ b/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 ( +
+ + + + + + + + + + setAttributes( { archiveUrl: value } ) + } + placeholder="https://example.com" + __next40pxDefaultSize + __nextHasNoMarginBottom + /> + + + { getBookmarkIcon() } + 1 +
+ ); +} diff --git a/packages/block-library/src/bookmark-count/icons.js b/packages/block-library/src/bookmark-count/icons.js new file mode 100644 index 00000000000000..2f469d3f386fd4 --- /dev/null +++ b/packages/block-library/src/bookmark-count/icons.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/components'; + +export const bookmark = ( + +); + +export const heart = ( + +); + +export const star = ( + +); diff --git a/packages/block-library/src/bookmark-count/index.js b/packages/block-library/src/bookmark-count/index.js new file mode 100644 index 00000000000000..d9297456a2ea05 --- /dev/null +++ b/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 } ); diff --git a/packages/block-library/src/bookmark-count/index.php b/packages/block-library/src/bookmark-count/index.php new file mode 100644 index 00000000000000..9f19c16f7d7995 --- /dev/null +++ b/packages/block-library/src/bookmark-count/index.php @@ -0,0 +1,88 @@ + 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( + "
+
+ +
+
+ ", + $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' ); diff --git a/packages/block-library/src/bookmark-count/init.js b/packages/block-library/src/bookmark-count/init.js new file mode 100644 index 00000000000000..79f0492c2cb2f8 --- /dev/null +++ b/packages/block-library/src/bookmark-count/init.js @@ -0,0 +1,6 @@ +/** + * Internal dependencies + */ +import { init } from './'; + +export default init(); diff --git a/packages/block-library/src/bookmark-count/style.scss b/packages/block-library/src/bookmark-count/style.scss new file mode 100644 index 00000000000000..b16644687d1680 --- /dev/null +++ b/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; +} diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 262f11de6ee22d..2fab3d05e28131 100644 --- a/packages/block-library/src/index.js +++ b/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, diff --git a/test/integration/fixtures/blocks/core__bookmark-count.html b/test/integration/fixtures/blocks/core__bookmark-count.html new file mode 100644 index 00000000000000..1090fd842d1918 --- /dev/null +++ b/test/integration/fixtures/blocks/core__bookmark-count.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/test/integration/fixtures/blocks/core__bookmark-count.json b/test/integration/fixtures/blocks/core__bookmark-count.json new file mode 100644 index 00000000000000..6489de0f0f99c2 --- /dev/null +++ b/test/integration/fixtures/blocks/core__bookmark-count.json @@ -0,0 +1,11 @@ +[ + { + "name": "core/bookmark-count", + "isValid": true, + "attributes": { + "iconType": "heart", + "archiveUrl": "" + }, + "innerBlocks": [] + } +] diff --git a/test/integration/fixtures/blocks/core__bookmark-count.parsed.json b/test/integration/fixtures/blocks/core__bookmark-count.parsed.json new file mode 100644 index 00000000000000..0af7388d89df95 --- /dev/null +++ b/test/integration/fixtures/blocks/core__bookmark-count.parsed.json @@ -0,0 +1,9 @@ +[ + { + "blockName": "core/bookmark-count", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__bookmark-count.serialized.html b/test/integration/fixtures/blocks/core__bookmark-count.serialized.html new file mode 100644 index 00000000000000..1f56477ec38392 --- /dev/null +++ b/test/integration/fixtures/blocks/core__bookmark-count.serialized.html @@ -0,0 +1 @@ +