Footnote numbering hooks #3685

tg-ephox · 2017-11-28T06:16:56Z

Description

Exploring using hooks to number/remove numbering from footnotes.

Need to use the following content in a Paragraph block:

<p>
    here is a paragraph! here is a footnote
    <a href="#footnote-123"><sup>[123]</sup></a>
    <strong>and another footnote<a href="#footnote-456"><sup>[456]</sup></a></strong>
</p>

The getSaveContent.extraProps hook works quite well to post-process content however the BlockEdit hook is a little harder to get right.

If I click in the Paragraph block the custom-class-name hook will run first and return an array with the Edit and InspectorControls elements so the footnotes hook needs to be aware of this structure changed by the previous hook...

Is there a better way to manage this?

Also the footnotes hook will need to be able to access redux state, as I'm sure other hooks will, in order to determine the numbering of the footnotes...

How Has This Been Tested?

Screenshots (jpeg or gifs if applicable):

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows has proper inline documentation.

codecov · 2017-11-28T06:17:02Z

Codecov Report

Merging #3685 into master will decrease coverage by 0.99%.
The diff coverage is 80.95%.

@@           Coverage Diff            @@
##           master    #3685    +/-   ##
========================================
- Coverage   38.22%   37.23%    -1%     
========================================
  Files         282      277     -5     
  Lines        6864     6674   -190     
  Branches     1257     1215    -42     
========================================
- Hits         2624     2485   -139     
+ Misses       3566     3532    -34     
+ Partials      674      657    -17

Impacted Files	Coverage Δ
blocks/library/paragraph/index.js	`23.07% <ø> (ø)`	⬆️
element/index.js	`100% <ø> (ø)`	⬆️
blocks/hooks/index.js	`100% <100%> (ø)`	⬆️
blocks/hooks/footnotes.js	`80% <80%> (ø)`
components/panel/color.js	`0% <0%> (-100%)`	⬇️
editor/components/warning/index.js	`0% <0%> (-100%)`	⬇️
components/panel/row.js	`0% <0%> (-100%)`	⬇️
blocks/block-controls/index.js	`0% <0%> (-100%)`	⬇️
blocks/alignment-toolbar/index.js	`16.66% <0%> (-83.34%)`	⬇️
blocks/block-alignment-toolbar/index.js	`33.33% <0%> (-55.56%)`	⬇️
... and 77 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8777e86...55ce16c. Read the comment docs.

tg-ephox · 2017-11-29T06:54:02Z

blocks/block-edit/index.js

@@ -20,7 +20,14 @@ function BlockEdit( props ) {
 		Edit = blockType.edit || blockType.save;
 	}

-	return applyFilters( 'BlockEdit', <Edit key="edit" { ...editProps } />, props );
+	const filteredElements = applyFilters( 'BlockEdit', { edit: <Edit key="edit" { ...editProps } />, fragments: [] }, props );


@aduth does it make sense separate the Edit element here so that later hooks can rely on it being an element still (in the shape registered)? I added a fragments key also which works for fills, this could actually be calledfills...

tg-ephox · 2017-11-29T06:54:42Z

blocks/block-edit/index.js

-	return applyFilters( 'BlockEdit', <Edit key="edit" { ...editProps } />, props );
+	const filteredElements = applyFilters( 'BlockEdit', { edit: <Edit key="edit" { ...editProps } />, fragments: [] }, props );
+
+	if ( filteredElements.edit.type !== Edit ) {


This might be too limiting...

aduth · 2017-12-11T14:35:21Z

If I click in the Paragraph block the custom-class-name hook will run first and return an array with the Edit and InspectorControls elements so the footnotes hook needs to be aware of this structure changed by the previous hook...

Is there a better way to manage this?

Yes, @gziolo had explored what I find to be a better approach for handling the component hooks, which is to treat each hook as a higher-order component. In other words, it doesn't return an element (which can take many shapes) but instead returns a new component.

@gziolo has this since been merged? Can you link to the work here?

aduth · 2017-12-11T15:16:06Z

The aforementioned work is #3827, where some discussion has already occurred.

This reverts commit a42df58.

This reverts commit 59b3ea2.

gziolo · 2017-12-12T07:44:57Z

blocks/hooks/footnotes.js

+	return element;
+}
+
+export default function footnotes( { addFilter } ) {


#3827 that @aduth referenced got merged. We no longer pass addFilter from outside. It's now directly imported from @wordpress/hooks. We also updated hook names:

getSaveContent.extraProps -> blocks.getSaveContent.extraProps

BlockEdit -> blocks.BlockEdit
Those name may change in the near future. You can also use slashes in namespaces:

core-footnotes vs core/footnotes

tg-ephox · 2017-12-14T01:14:12Z

Thanks @aduth the BlockEdit hook returning a HoC works nicely!

danielbachhuber · 2018-05-22T16:52:26Z

@tg-ephox @gziolo Is this still relevant / actionable?

gziolo · 2018-05-23T07:38:27Z

@mtias - is it something we need for 5.0? It looks like an abandoned task.

gziolo · 2018-06-10T05:28:39Z

There was no activity in this PR for over 6 months. It looks like it was abandoned. Let’s close it. We can always reopen and rebase it with master branch to align with the current state of Gutenberg.

First try at using hooks for footnote numbering

1512230

tg-ephox added the [Status] In Progress Tracking issues with work in progress label Nov 28, 2017

tg-ephox added 2 commits November 28, 2017 16:21

Add missed files

33ca2b4

Fix linting

4ee4396

tg-ephox requested a review from youknowriad November 28, 2017 07:21

tg-ephox added 2 commits November 29, 2017 14:01

Refactor BlockEdit hooks so return is consistent

59b3ea2

Fix tests

a42df58

tg-ephox commented Nov 29, 2017

View reviewed changes

tg-ephox mentioned this pull request Dec 6, 2017

Client side data APIs for Gutenberg (and WordPress in general) #3805

Closed

tg-ephox added 2 commits December 12, 2017 17:27

Revert "Fix tests"

7836265

This reverts commit a42df58.

Revert "Refactor BlockEdit hooks so return is consistent"

835b260

This reverts commit 59b3ea2.

gziolo reviewed Dec 12, 2017

View reviewed changes

tg-ephox added 2 commits December 13, 2017 10:14

Merge branch 'master' into try/footnotes-save-content-hook

df1fc27

Refactor BlockEdit hook to HoC

55ce16c

Make utility function to map elements recursively

cc904ea

danielbachhuber added [Status] Needs More Info Follow-up required in order to be actionable. and removed [Status] In Progress Tracking issues with work in progress labels May 22, 2018

gziolo added the [Status] Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label May 23, 2018

gziolo closed this Jun 10, 2018

gziolo deleted the try/footnotes-save-content-hook branch June 10, 2018 05:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Footnote numbering hooks #3685

Footnote numbering hooks #3685

tg-ephox commented Nov 28, 2017 •

edited

Loading

codecov bot commented Nov 28, 2017 •

edited

Loading

tg-ephox Nov 29, 2017 •

edited

Loading

tg-ephox Nov 29, 2017

aduth commented Dec 11, 2017

aduth commented Dec 11, 2017

gziolo Dec 12, 2017 •

edited

Loading

tg-ephox commented Dec 14, 2017

danielbachhuber commented May 22, 2018

gziolo commented May 23, 2018

gziolo commented Jun 10, 2018

Footnote numbering hooks #3685

Footnote numbering hooks #3685

Conversation

tg-ephox commented Nov 28, 2017 • edited Loading

Description

How Has This Been Tested?

Screenshots (jpeg or gifs if applicable):

Types of changes

Checklist:

codecov bot commented Nov 28, 2017 • edited Loading

Codecov Report

tg-ephox Nov 29, 2017 • edited Loading

Choose a reason for hiding this comment

tg-ephox Nov 29, 2017

Choose a reason for hiding this comment

aduth commented Dec 11, 2017

aduth commented Dec 11, 2017

gziolo Dec 12, 2017 • edited Loading

Choose a reason for hiding this comment

tg-ephox commented Dec 14, 2017

danielbachhuber commented May 22, 2018

gziolo commented May 23, 2018

gziolo commented Jun 10, 2018

tg-ephox commented Nov 28, 2017 •

edited

Loading

codecov bot commented Nov 28, 2017 •

edited

Loading

tg-ephox Nov 29, 2017 •

edited

Loading

gziolo Dec 12, 2017 •

edited

Loading