Skip to content

Commit

Permalink
Merge the blocks and remove the old one
Browse files Browse the repository at this point in the history
  • Loading branch information
DAreRodz committed Jul 7, 2022
1 parent bbd198d commit a79556e
Showing 19 changed files with 512 additions and 460 deletions.
25 changes: 8 additions & 17 deletions docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
@@ -60,7 +60,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
- **Name:** core/buttons
- **Category:** design
- **Supports:** align (full, wide), anchor, spacing (blockGap, margin)
- **Attributes:**
- **Attributes:**

## Calendar

@@ -168,7 +168,7 @@ Contains the block elements used to display a comment, like the title, date, aut
- **Name:** core/comment-template
- **Category:** design
- **Supports:** align, ~~html~~, ~~reusable~~
- **Attributes:**
- **Attributes:**

## Comments

@@ -204,7 +204,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
- **Name:** core/comments-pagination-numbers
- **Category:** theme
- **Supports:** ~~html~~, ~~reusable~~
- **Attributes:**
- **Attributes:**

## Previous Page

@@ -420,7 +420,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com
- **Name:** core/nextpage
- **Category:** design
- **Supports:** ~~className~~, ~~customClassName~~, ~~html~~
- **Attributes:**
- **Attributes:**

## Page List

@@ -485,15 +485,6 @@ This block is deprecated. Please use the Comments block instead. ([Source](https
- **Supports:** ~~html~~, ~~inserter~~
- **Attributes:** commentId

## Post Comments (deprecated)

This block is deprecated. Please use the Comments block instead. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments))

- **Name:** core/post-comments
- **Category:** theme
- **Supports:** align (full, wide), color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~
- **Attributes:** textAlign

## Post Comments Count

Display a post's comments count. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/post-comments-count))
@@ -528,7 +519,7 @@ Displays the contents of a post or page. ([Source](https://github.com/WordPress/
- **Name:** core/post-content
- **Category:** theme
- **Supports:** align (full, wide), ~~html~~
- **Attributes:**
- **Attributes:**

## Post Date

@@ -573,7 +564,7 @@ Contains the block elements used to render a post, like the title, date, feature
- **Name:** core/post-template
- **Category:** theme
- **Supports:** align, ~~html~~, ~~reusable~~
- **Attributes:**
- **Attributes:**

## Post Terms

@@ -627,7 +618,7 @@ Contains the block elements used to render content when no query results are fou
- **Name:** core/query-no-results
- **Category:** theme
- **Supports:** align, color (background, gradients, link, text), ~~html~~, ~~reusable~~
- **Attributes:**
- **Attributes:**

## Pagination

@@ -654,7 +645,7 @@ Displays a list of page numbers for pagination ([Source](https://github.com/Word
- **Name:** core/query-pagination-numbers
- **Category:** theme
- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:**
- **Attributes:**

## Previous Page

1 change: 1 addition & 0 deletions lib/blocks.php
Original file line number Diff line number Diff line change
@@ -63,6 +63,7 @@ function gutenberg_reregister_core_block_types() {
'comments-pagination-numbers.php' => 'core/comments-pagination-numbers',
'comments-pagination-previous.php' => 'core/comments-pagination-previous',
'comments-title.php' => 'core/comments-title',
'comments.php' => 'core/comments-query-loop',
'file.php' => 'core/file',
'home-link.php' => 'core/home-link',
'image.php' => 'core/image',
6 changes: 5 additions & 1 deletion packages/block-library/src/comments/block.json
Original file line number Diff line number Diff line change
@@ -10,6 +10,9 @@
"tagName": {
"type": "string",
"default": "div"
},
"legacy": {
"type": "boolean"
}
},
"supports": {
@@ -25,5 +28,6 @@
}
}
},
"editorStyle": "wp-block-comments-editor"
"editorStyle": "wp-block-comments-editor",
"usesContext": [ "postId", "postType" ]
}
131 changes: 131 additions & 0 deletions packages/block-library/src/comments/edit/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import {
AlignmentControl,
BlockControls,
Warning,
useBlockProps,
useInnerBlocksProps,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { __, sprintf } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { useEntityProp, store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/
import CommentsInspectorControls from './comments-inspector-controls';
import Placeholder from './placeholder';
import TEMPLATE from './template';

export default function PostCommentsEdit( {
attributes,
setAttributes,
context: { postType, postId },
} ) {
const { tagName: TagName, textAlign } = attributes;

const [ commentStatus ] = useEntityProp(
'postType',
postType,
'comment_status',
postId
);

const { defaultCommentStatus } = useSelect(
( select ) =>
select( blockEditorStore ).getSettings()
.__experimentalDiscussionSettings
);

const isSiteEditor = postType === undefined || postId === undefined;

const postTypeSupportsComments = useSelect( ( select ) =>
postType
? !! select( coreStore ).getPostType( postType )?.supports.comments
: false
);

let warning = __(
'Post Comments block: This is just a placeholder, not a real comment. The final styling may differ because it also depends on the current theme. For better compatibility with the Block Editor, please consider replacing this block with the "Comments Query Loop" block.'
);
let showPlacholder = true;

if ( ! isSiteEditor && 'open' !== commentStatus ) {
if ( 'closed' === commentStatus ) {
warning = sprintf(
/* translators: 1: Post type (i.e. "post", "page") */
__(
'Post Comments block: Comments to this %s are not allowed.'
),
postType
);
showPlacholder = false;
} else if ( ! postTypeSupportsComments ) {
warning = sprintf(
/* translators: 1: Post type (i.e. "post", "page") */
__(
'Post Comments block: Comments for this post type (%s) are not enabled.'
),
postType
);
showPlacholder = false;
} else if ( 'open' !== defaultCommentStatus ) {
warning = __( 'Post Comments block: Comments are not enabled.' );
showPlacholder = false;
}
}

const blockProps = useBlockProps( {
className: classnames(
// We add the previous block name for backward compatibility.
'wp-block-comments-query-loop',
{
[ `has-text-align-${ textAlign }` ]: textAlign,
}
),
} );
const innerBlocksProps = useInnerBlocksProps( blockProps, {
template: TEMPLATE,
} );

if ( ! attributes.legacy ) {
return (
<>
<CommentsInspectorControls
attributes={ attributes }
setAttributes={ setAttributes }
/>
<TagName { ...innerBlocksProps } />
</>
);
}

return (
<>
<BlockControls group="block">
<AlignmentControl
value={ textAlign }
onChange={ ( nextAlign ) => {
setAttributes( { textAlign: nextAlign } );
} }
/>
</BlockControls>

<div { ...blockProps }>
<Warning>{ warning }</Warning>

{ showPlacholder && (
<Placeholder postId={ postId } postType={ postType } />
) }
</div>
</>
);
}
121 changes: 121 additions & 0 deletions packages/block-library/src/comments/edit/placeholder.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
/**
* WordPress dependencies
*/
import { store as blockEditorStore } from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { useSelect } from '@wordpress/data';
import { useEntityProp } from '@wordpress/core-data';
import { useDisabled } from '@wordpress/compose';

/**
* Internal dependencies
*/
import CommentsForm from '../../post-comments-form/form';

export default function PostCommentsPlaceholder( { postType, postId } ) {
let [ postTitle ] = useEntityProp( 'postType', postType, 'title', postId );
postTitle = postTitle || __( 'Post Title' );

const { avatarURL } = useSelect(
( select ) =>
select( blockEditorStore ).getSettings()
.__experimentalDiscussionSettings
);

const disabledRef = useDisabled();

return (
<div
className="wp-block-post-comments__placeholder"
ref={ disabledRef }
>
<h3>
{ __( 'One response to' ) }{ postTitle }
</h3>

<div className="navigation">
<div className="alignleft">
<a href="#top">« { __( 'Older Comments' ) }</a>
</div>
<div className="alignright">
<a href="#top">{ __( 'Newer Comments' ) } »</a>
</div>
</div>

<ol className="commentlist">
<li className="comment even thread-even depth-1">
<article className="comment-body">
<footer className="comment-meta">
<div className="comment-author vcard">
<img
alt="Commenter Avatar"
src={ avatarURL }
className="avatar avatar-32 photo"
height="32"
width="32"
loading="lazy"
/>
<b className="fn">
<a href="#top" className="url">
{ __( 'A WordPress Commenter' ) }
</a>
</b>{ ' ' }
<span className="says">{ __( 'says' ) }:</span>
</div>

<div className="comment-metadata">
<a href="#top">
<time dateTime="2000-01-01T00:00:00+00:00">
{ __( 'January 1, 2000 at 00:00 am' ) }
</time>
</a>{ ' ' }
<span className="edit-link">
<a
className="comment-edit-link"
href="#top"
>
{ __( 'Edit' ) }
</a>
</span>
</div>
</footer>

<div className="comment-content">
<p>
{ __( 'Hi, this is a comment.' ) }
<br />
{ __(
'To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.'
) }
<br />
{ __( 'Commenter avatars come from' ) }{ ' ' }
<a href="https://gravatar.com/">Gravatar</a>.
</p>
</div>

<div className="reply">
<a
className="comment-reply-link"
href="#top"
aria-label="Reply to A WordPress Commenter"
>
{ __( 'Reply' ) }
</a>
</div>
</article>
</li>
</ol>

<div className="navigation">
<div className="alignleft">
<a href="#top">« { __( 'Older Comments' ) }</a>
</div>
<div className="alignright">
<a href="#top">{ __( 'Newer Comments' ) } »</a>
</div>
</div>

<CommentsForm />
</div>
);
}
Loading

0 comments on commit a79556e

Please sign in to comment.