Add Archives block #5495

miina · 2018-03-08T09:15:01Z

Continued archives block implementation from #1518. Archive block implementation that uses similar output and filters as the archives widget. Has alignment toolbar within the block (left, center, right).

Screenshots:

Block toolbar:

Inspector toolbar:

Dropdown view:

List view:

Fixes #1464.

miina · 2018-03-08T13:26:06Z

Specs for the possible archives REST API endpoint in case of going that direction:

Read only (wp/v2/archives);
Returns list of archives, for example:

{
	0: {
		'text': 'February 2018',
		'href': 'http://gutenberg.local/2018/02/',
		'html': '<li><a href="http://gutenberg.local/2018/02/">February 2018</a>&nbsp;(11)</li>',
		'count': 11,
	},
	1: {
		...
	}
}

Accepts the following params (same as wp_get_archives() except for echo):
-- type ('daily', 'monthly', etc.);
-- limit;
-- format;
-- before;
-- after;
-- show_post_count;
-- order;
-- post_type;

Thoughts?

westonruter · 2018-03-08T16:33:20Z

I don't think that the response should include html. Also I don't think parameters for format, before, or after should be included. The endpoint who's return the raw data and the client can format it as desired.

miina · 2018-03-08T16:48:47Z

Okay. I was thinking that maybe including html could make it more straightforward to match the result of wp_get_archives(), and also thinking of some other elements (e.g. post title / attachment caption that have a raw version + html version) so the API user can choose.

However, I guess from API's perspective it makes more sense to just return raw data in this case 👍

Lewiscowles1986 · 2018-03-12T10:27:34Z

Have to agree with @miina approach. Other works on visual shortcodes are returning HTML from WP, including CSS + JS

Lewiscowles1986 · 2018-03-12T10:51:10Z

The main problem with this for me is what to do about content that is added with the archives block. Is the content only for when there is nothing in the archive, is there an option for that. Will it fall-back to the built-in WP content experience (with oEmbed & shortcode) etc?

If it does, I think running $output_content = apply_filters('the_content', $content); might be an option, but it goes against the block based nature of Gutenberg (where things are separate and re-orderable). You could, for example, encourage users to use the paragraph block if they desire that experience, then focus solely on the archives (perhaps a custom JS + CSS + raw HTML as part of config).

…omponent.

…t of the REST API * Singularize "blocks renderer" to "block renderer" * Rename 'output' property to 'rendered' property. * Re-use get_item_permissions_check and get_item method names.

* Supply block attributes schema as endpoint schema. * Introduce attributes endpoint property and let REST API schema validate and sanitize them. * Ensure that attribute values are sanitized in addition to validated.

mcsf

My main concern at this point is that, by relying on the front-end rendering output, we end up with some strange situations. The largest is the handling of links:

while another issue, as mentioned inline, lies in the existence of repeated HTML element IDs.

mcsf · 2018-05-26T17:29:57Z

core-blocks/archives/index.php

+ */
+function render_block_core_archives( $attributes ) {
+	static $block_id = 0;
+	$block_id++;


The way this is used in tandem with ServerSideRender, this will generally lead to ID conflicts. From my own local testing:

document.querySelectorAll( '#wp-block-archives-1' )

returns multiple elements if I have more than one Archive block in my editor.

Worth noting that implementing an edit for this block type would allow the editor to retain more control over this kind of information.

Added using uniqid instead, thoughts?

@mcsf Also disabled the pointer-events of the links, this way it'll not cause the leaving page alert, however, the links are not clickable within the editor. Probably better but not ideal, thoughts?

Added using uniqid

That should do for now, thanks.

disabled the pointer-events of the links

It doesn't solve for other interactions (e.g. when attribute Display as dropdown is on). It's indeed not ideal, but I don't have a good solution. I mean, sure, we could also disable pointer-events on select elements, but then even more interaction is lost, perhaps leading the user to perceive the experience as "buggy" and, thus, confusing. On the other hand, hijacking select elements to remove their onchange attribute could technically help, but that sounds like a very bad precedent to set. /cc @mtias

mcsf · 2018-05-26T17:31:46Z

core-blocks/archives/index.php

+	static $block_id = 0;
+	$block_id++;
+
+	$show_post_count = ! empty( $attributes['showPostCounts'] ) ? true : false;


Ternary unnecessary

// for any boolean A, ( A ? true : false ) === A

mcsf · 2018-05-26T17:40:12Z

core-blocks/archives/block.js

+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+						controls={ [ 'left', 'center', 'right', 'full' ] }


Curious why full is supported but not wide. (If both should be, the controls prop doesn't need to be passed at all.)

Not sure if it should support full either, removed it.

Edit: Originally based this on other dynamic blocks, e.g. Categories and Latest Posts. Not sure if there's a standard for which controls to support. Thoughts?

I'm not aware of a proper standard. I think it's fine to remove both for now.

In any case, cc'ing @jasmussen to make sure you're aware of these differences :)

mcsf · 2018-05-26T17:42:11Z

core-blocks/archives/block.js

+			</Fragment>
+		);
+	}
+}


Considering the life cycle of the ArchivesBlock component, and the fact that the block proper isn't very interactive, I'm not sure we need a class-based component and the ahead-of-time binding of the toggle* methods. In other words, edit could just be a functional component.

@mcsf Curious if that's a matter of preference or would there be benefits for using edit as functional component instead?

It's sort of been a tendency throughout Gutenberg to avoid what is, in a way, a performance trade-off that prioritizes performance of repeated rendering, at the (slight) cost of init-time bindings and increased memory footprint (which may add up with every little component) and at the (arguably) higher cost of code complexity for newcomers. For a component like ArchivesBlock, I'm tempted to say we're better off going with something simpler (i.e. functional component) even if it means binding two event handlers when rendering.

More on the subject of the cost of render-time inline functions: https://cdb.reacttraining.com/react-inline-functions-and-performance-bdff784f5578

mcsf · 2018-05-26T17:44:31Z

core-blocks/archives/index.php

+				'type'    => 'boolean',
+				'default' => false,
+			),
+			'align'             => array(


Minor/subjective, but the whitespace resulting from keeping certain elements aligned across lines can be distracting.

The linter enforces this, for better or worse 🙂

gziolo · 2018-06-19T11:42:54Z

@miina, moving to the 3.2 milestone. Do you need any help with this one, it wasn't updated in the last 18 days.

miina · 2018-06-19T11:45:04Z

@gziolo Thanks for the update, latest change was updating the PR according to the review from @mcsf, haven't received a response to that yet, waiting for additional feedback.

gziolo · 2018-06-19T11:47:04Z

Cool, so we will simply move it back to 3.1 if @mcsf is happy about the current shape of PR :)

mcsf

Thanks for your patience, @miina.

Codewise I think we're essentially there, but I'm pretty concerned about the handling of interactive elements, namely those triggering navigation, as pointed out in inline comments.

To go into a broader discussion, I think this hurdle illustrates how tricky it can be to bridge server-rendered widgets (made for the specific context of front-end visualization; usually dependent on server logic but then also occasionally interacting with the client) and editor-facing blocks (highly interactive but also specifically built for the editing context). Solving for Archives will help for the next widgets that should be ported using <ServerSideRender />, but I suspect more challenges will be met.

Let me reflect a bit, and also see if someone else has a different perspective on this that helps us move forward.

miina · 2018-07-05T08:30:49Z

@mcsf Any thoughts on the implementation so far?

For information that I'm going to be mostly offline now until the end of July -- if any changes would be necessary meanwhile to have the PR merged, anyone is welcome to pick it up.

noisysocks · 2018-07-06T01:40:25Z

To go into a broader discussion, I think this hurdle illustrates how tricky it can be to bridge server-rendered widgets (made for the specific context of front-end visualization; usually dependent on server logic but then also occasionally interacting with the client) and editor-facing blocks (highly interactive but also specifically built for the editing context).

Some similar reflections came up while adding the Playlist block (#7126). I think that, in general, we should avoid using <ServerSideRender> to implement blocks because it discourages direct manipulation which is one of our foundational design principles. For example, a block implemented using <ServerSideRender> would nearly always have to have its attributes adjusted using checkbox and dropdown controls that are in the sidebar.

Having said that, I think <ServerSideRender> is a totally acceptable approach for interim/iterative solutions (as in #7126) and in cases like this where the block is largely non-interactive. I'm happy with how this PR is implemented so long as we fix the issue you identified with links causing navigation.

That's my 2¢! Curious to hear what the leads think @mtias @karmatosed.

noisysocks

Code's looking really great! If we can think of a more durable solution than pointer-events: none, then I'm happy.

noisysocks · 2018-07-06T01:30:54Z

core-blocks/archives/editor.scss

@@ -0,0 +1,4 @@
+.gutenberg .wp-block-archives a {
+	pointer-events: none;


Unfortunately this doesn't completely disable the link. A user is still able to "click" it by focusing it using their keyboard and then pressing ENTER.

I'd try wrapping the <ServerSideRender> component with the <Disabled> component that we have and seeing what happens.

https://github.com/WordPress/gutenberg/tree/master/components/disabled

noisysocks · 2018-07-06T01:43:08Z

core-blocks/archives/block.js

+			<InspectorControls key="inspector">
+				<PanelBody title={ __( 'Archives Settings' ) }>
+					<ToggleControl
+						label={ __( 'Show post counts' ) }


We probably should make this title case for consistency with other inspector control labels in Gutenberg.

label={ __( 'Show Post Counts' ) }

noisysocks · 2018-07-06T01:43:28Z

core-blocks/archives/block.js

+						onChange={ this.toggleShowPostCounts }
+					/>
+					<ToggleControl
+						label={ __( 'Display as dropdown' ) }


Same again here.

label={ __( 'Display as Dropdown' ) }

noisysocks · 2018-07-06T01:45:07Z

core-blocks/archives/block.js

+						controls={ [ 'left', 'center', 'right' ] }
+					/>
+				</BlockControls>
+				<ServerSideRender key="archives" block="core/archives" attributes={ this.props.attributes } />


We could replace this.props.attributes with attributes.

noisysocks · 2018-07-06T01:49:49Z

core-blocks/archives/index.js

+
+	save() {
+		// Handled by PHP.
+		return null;


Is there something we can return here as a fallback for clients like RSS readers that don't support dynamic blocks?

(Probably not, just wondering.)

noisysocks · 2018-07-06T01:50:51Z

core-blocks/archives/index.js

+
+	category: 'widgets',
+
+	keywords: [ __( 'archives' ) ],


We could remove this line. Gutenberg will treat the title (Archives) as an implicit search keyword.

noisysocks · 2018-07-06T01:54:10Z

core-blocks/archives/index.php

+				'type'    => 'boolean',
+				'default' => false,
+			),
+			'align'             => array(


The linter enforces this, for better or worse 🙂

talldan · 2018-07-13T10:15:33Z

Will continue implementation on #7949

Co-authored-by: Pascal Birchler <hello@pascalbirchler.ch> Co-authored-by: Miina Sikk <miina.sikk@gmail.com> Co-authored-by: Weston Ruter <weston@xwp.co>

* Changes from PR #5495 squashed into single commit Co-authored-by: Pascal Birchler <hello@pascalbirchler.ch> Co-authored-by: Miina Sikk <miina.sikk@gmail.com> Co-authored-by: Weston Ruter <weston@xwp.co> * Remove archived keywords, since the title is implicitly a keyword already * Use already destructured property `attributes` over `this.props.attributes` * Use title case for copy * Use `Disabled` element to prevent interaction with Archives Block editor view Use of `pointer-events` to disable interaction was problematic. It didn't disabled the dropdown version of the block and it doesn't prevent keyboard interaction. The Disabled component handles these situations. * Rename block.js to edit.js for consistency with other blocks * Convert ArchivesEdit to a function component * Remove `isSelected` boolean and inline InspectorControls * Render archives list container as `ul` when a list and `div` when a dropdown * Remove unnecessary React keys * Improve description copy

swissspidy and others added 9 commits June 27, 2017 19:54

First pass at archives block

c664b53

Merge master & resolve conflicts.

d7430c7

Refactor code to match current gutenberg architecture.

12cf65b

Fixes to frontend rendering.

12094d8

Fix dropdown ID.

527cdb1

Merge remote-tracking branch 'origin/master' into add/archives-block

e0413a2

Fix some CS issues.

5657a36

Resolve conflicts.

660bf4a

Merge master.

aba8455

afercia mentioned this pull request Mar 9, 2018

Add "Archives" block #1518

Closed

miina added 10 commits March 12, 2018 19:52

Add blocks-renderer API endpoint. Add skeleton for ServerSideRender c…

cd58776

…omponent.

Update SSR preview when editing attributes.

b0ede76

Fix binding preview change.

340136e

Fix binding preview change.

514dd4f

Add tests. Fix permission check for get_item.

a90f40d

Remove debugger line.

0c127e1

Fix some phpcs.

b0b977a

Fix some jscs.

395a168

Show 'loading' when changing response.

1d05c2d

Use wp.apiRequest for consistency.

c40dd25

miina mentioned this pull request Mar 14, 2018

Add Server Side Render component. #5602

Merged

3 tasks

westonruter and others added 4 commits March 14, 2018 11:26

Update ServerSideRender readme to note intended usage

f323651

Rename classes, methods, and property to be more aligned with the res…

c4abc69

…t of the REST API * Singularize "blocks renderer" to "block renderer" * Rename 'output' property to 'rendered' property. * Re-use get_item_permissions_check and get_item method names.

Register block-renderer endpoint for each dynamic block

6557877

* Supply block attributes schema as endpoint schema. * Introduce attributes endpoint property and let REST API schema validate and sanitize them. * Ensure that attribute values are sanitized in addition to validated.

Fixes to README. Use isEqual. Renaming method.

228c756

miina added 2 commits May 23, 2018 20:34

Merge branch 'master' into add/archives-block

d8ee393

Use Fragment. Use wp.editor instead of wp.blocks.

128513c

mcsf requested changes May 26, 2018

View reviewed changes

miina added 2 commits May 29, 2018 08:24

Merge remote-tracking branch 'origin/master' into add/archives-block

d870d2d

Minor fixes.

a212cbc

youknowriad modified the milestones: 3.0, 3.1 May 29, 2018

miina added 2 commits June 1, 2018 13:12

Use uniqid for dropdown. Disable link events.

931d08c

Merge remote-tracking branch 'origin/master' into add/archives-block

1eec0e0

gziolo modified the milestones: 3.1, 3.2 Jun 19, 2018

mcsf reviewed Jun 19, 2018

View reviewed changes

Merge remote-tracking branch 'origin/master' into add/archives-block

74ca70f

gziolo modified the milestones: 3.2, 3.3 Jul 5, 2018

noisysocks requested changes Jul 6, 2018

View reviewed changes

talldan mentioned this pull request Jul 13, 2018

Add Archives block #7949

Merged

talldan closed this Jul 13, 2018

talldan added a commit that referenced this pull request Jul 16, 2018

Changes from PR #5495 squashed into single commit

07da41e

Co-authored-by: Pascal Birchler <hello@pascalbirchler.ch> Co-authored-by: Miina Sikk <miina.sikk@gmail.com> Co-authored-by: Weston Ruter <weston@xwp.co>

mcsf mentioned this pull request Oct 3, 2018

Cover Image: Add configurable overlay color #10291

Merged

4 tasks

		@@ -0,0 +1,4 @@
		.gutenberg .wp-block-archives a {
		pointer-events: none;

Add Archives block #5495

Add Archives block #5495

Conversation

miina commented Mar 8, 2018 • edited Loading

Screenshots:

miina commented Mar 8, 2018 • edited Loading

westonruter commented Mar 8, 2018

miina commented Mar 8, 2018

Lewiscowles1986 commented Mar 12, 2018 • edited Loading

Lewiscowles1986 commented Mar 12, 2018 • edited Loading

mcsf left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

miina Jun 1, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Jun 19, 2018

miina commented Jun 19, 2018

gziolo commented Jun 19, 2018

mcsf left a comment

Choose a reason for hiding this comment

miina commented Jul 5, 2018

noisysocks commented Jul 6, 2018 • edited Loading

noisysocks left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan commented Jul 13, 2018

miina commented Mar 8, 2018 •

edited

Loading

miina commented Mar 8, 2018 •

edited

Loading

Lewiscowles1986 commented Mar 12, 2018 •

edited

Loading

Lewiscowles1986 commented Mar 12, 2018 •

edited

Loading

miina Jun 1, 2018 •

edited

Loading

noisysocks commented Jul 6, 2018 •

edited

Loading