Add/table of contents #15426

ashwin-pc · 2019-05-03T19:11:36Z

Description

Adding a Table of Contents block. #11047

This block is based off a similar block plugin Guidepost but rebuilt to essentially behave similar to Table of Contents as seen on other major platforms such as Google Docs and Word.

The block auto populates links based on the heading hierarchy of the post with the option to either:

auto-sync changes

or to sync changes when manually triggered.

When auto sync is turned off the block also allows you to manually edit the link names similar to other Table of Contents implimentations.

How has this been tested?

Passed all unit tests using npm run test and all end to end tests using npm run test-e2e. new Unit Tests will have to be written for the new block though.

Screenshots

Already given above

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

swissspidy · 2019-05-04T10:26:09Z

packages/block-library/src/table-of-contents/edit.js

+				}
+				{
+					<InspectorControls>
+						<PanelBody title={ 'Table of Contents Settings' }>


Missing translation function

swissspidy · 2019-05-04T10:26:49Z

packages/block-library/src/table-of-contents/edit.js

+					<InspectorControls>
+						<PanelBody title={ 'Table of Contents Settings' }>
+							<ToggleControl
+								label={ 'Auto Sync' }


Missing translation function

Plus, this needs a better label IMO. "Auto Sync" is not clear at all for users.

I agree. What would be a better label though?

@ashwin-pc perhaps a better label for this could be Track changes?

Update Items Automatically?

swissspidy · 2019-05-04T10:27:02Z

packages/block-library/src/table-of-contents/edit.js

+					<BlockControls>
+						<Toolbar>
+							<IconButton
+								label={ 'Update' }


Missing translation function

swissspidy · 2019-05-04T10:27:12Z

packages/block-library/src/table-of-contents/edit.js

+		const { autosync } = attributes;
+		const headings = attributes.headings || [];
+		if ( headings.length === 0 ) {
+			return ( <p>Start adding headings to generate Table of Contents</p> );


Missing translation function

swissspidy · 2019-05-04T10:27:51Z

packages/block-library/src/table-of-contents/edit.js

+	componentDidMount() {
+		const { attributes, setAttributes } = this.props;
+		const headings = attributes.headings || [];
+		const wpDataUnsubscribe = subscribe( () => {


I'd suggest using withSelect to get the page headings instead of doing a manual subscribe here.

@swissspidy Thanks for the suggestion. I will definitely look into that.

swissspidy · 2019-05-04T10:31:23Z

packages/block-library/src/table-of-contents/utils.js

+		let anchor = contentDiv.textContent || contentDiv.innerText || '';
+
+		if ( anchor !== '' && anchor.indexOf( '#' ) === -1 ) {
+			anchor = '#' + slugify( anchor, { remove: /[^\w\s-]/g } );


This should use the existing cleanForSlug utility IMO instead of adding an extra package just for this block.

gutenberg/packages/editor/src/utils/url.js

Lines 25 to 43 in f33498b

/**

* Performs some basic cleanup of a string for use as a post slug

*

* This replicates some of what santize_title() does in WordPress core, but

* is only designed to approximate what the slug will be.

*

* Converts whitespace, periods, forward slashes and underscores to hyphens.

* Converts Latin-1 Supplement and Latin Extended-A letters to basic Latin

* letters. Removes combining diacritical marks. Converts remaining string

* to lowercase. It does not touch octets, HTML entities, or other encoded

* characters.

*

* @param {string} string Title or slug to be processed

*

* @return {string} Processed string

*/

export function cleanForSlug( string ) {

return toLower( deburr( trim( string.replace( /[\s\./_]+/g, '-' ), '-' ) ) );

}

I did not know about that module. Yes that seems like a much better choice. I will make that change

swissspidy · 2019-05-04T10:32:52Z

packages/block-library/src/table-of-contents/utils.js

+}
+
+export function updateHeadingBlockAnchors() {
+	// Add anchors to any headings that don't have one.


Should we just put this logic to the heading blocks directly? Instead of modifying them from the outside.

That could be done. This was carried over from the plugin this was based on. It however is a requirement for this block alone that may not be required/wanted by the heading blocks. The other option i thought of having here was not to alter the heading id's at all but just link the ones that do have an anchor. Not sure which way to go but Id however love suggestions on the best way to implement this linking.

Copy changes from pull request #15426 (#15426). Adds Table of Contents block to the editor. Code contributions in this commit entirely made by ashwin-pc, originally based on the "Guidepost" block by sorta brilliant (https://sortabrilliant.com/guidepost/). Apply polish suggestions from code review. Improve variable names. Add comment Get rid of autosync (users should now convert to list if they want to edit the contents) Add ability to transform into list; remove unused ListLevel props Update table-of-contents block test configuration Simplify expression Remove unused function Remove unused styles. Rename TOCEdit to TableOfContentsEdit Apply suggestions from code review Remove non-existent import Make imports explicit Remove unused function Change unsubscribe function to class property Change JSON.stringify comparison to Lodash's isEqual Turns out refresh() is required Remove unnecessary state setting Don't change state on save Change behaviour to only add links if there are anchors specified by the user Newline Replace anchor with explicit key in map since anchor can now sometimes be empty Update test data Update packages/block-library/src/table-of-contents/block.json Rename ListLevel to ListItem for clarity and polish. Co-authored-by: ashwin-pc <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: Zebulan Stanphill <[email protected]>

Copy changes from pull request #15426 (#15426). Adds Table of Contents block to the editor. Code contributions in this commit entirely made by ashwin-pc, originally based on the "Guidepost" block by sorta brilliant (https://sortabrilliant.com/guidepost/). Apply polish suggestions from code review. Improve variable names. Add comment Get rid of autosync (users should now convert to list if they want to edit the contents) Add ability to transform into list; remove unused ListLevel props Update table-of-contents block test configuration Simplify expression Remove unused function Remove unused styles. Rename TOCEdit to TableOfContentsEdit Apply suggestions from code review Remove non-existent import Make imports explicit Remove unused function Change unsubscribe function to class property Change JSON.stringify comparison to Lodash's isEqual Turns out refresh() is required Remove unnecessary state setting Don't change state on save Change behaviour to only add links if there are anchors specified by the user Newline Replace anchor with explicit key in map since anchor can now sometimes be empty Update test data Update packages/block-library/src/table-of-contents/block.json Rename ListLevel to ListItem for clarity and polish. Co-authored-by: ashwin-pc <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: Zebulan Stanphill <[email protected]> Co-authored-by: JR Tashjian <[email protected]>

* SeanDS's implementation #21040 (#21040). Copy changes from pull request #15426 (#15426). Adds Table of Contents block to the editor. Code contributions in this commit entirely made by ashwin-pc, originally based on the "Guidepost" block by sorta brilliant (https://sortabrilliant.com/guidepost/). Apply polish suggestions from code review. Improve variable names. Add comment Get rid of autosync (users should now convert to list if they want to edit the contents) Add ability to transform into list; remove unused ListLevel props Update table-of-contents block test configuration Simplify expression Remove unused function Remove unused styles. Rename TOCEdit to TableOfContentsEdit Apply suggestions from code review Remove non-existent import Make imports explicit Remove unused function Change unsubscribe function to class property Change JSON.stringify comparison to Lodash's isEqual Turns out refresh() is required Remove unnecessary state setting Don't change state on save Change behaviour to only add links if there are anchors specified by the user Newline Replace anchor with explicit key in map since anchor can now sometimes be empty Update test data Update packages/block-library/src/table-of-contents/block.json Rename ListLevel to ListItem for clarity and polish. Co-authored-by: ashwin-pc <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: Zebulan Stanphill <[email protected]> Co-authored-by: JR Tashjian <[email protected]> * Polish, use hooks, and half-fix undo behavior. * Make dynamic, and add support for paginated posts + h1-h6 tags outside of core blocks. DRY out usage of list item class name. Improve handling of heading attributes. Add proper placeholder state in editor. Fix mistakes, improve naming/description, and polish code. Add support for page breaks in a Classic block. Always ignore empty headings. Various performance improvements. Change List block conversion to be a button in the toolbar. (It can't use the transform API since it uses dynamic data.) Remove unused key from hierarchical heading list. * Add unique icon. Co-authored-by: Joen A <[email protected]> * Fix "Convert to static list" control. * Tweak keywords. Co-authored-by: Sean Leavey <[email protected]> Co-authored-by: ashwin-pc <[email protected]> Co-authored-by: Daniel Richards <[email protected]> Co-authored-by: JR Tashjian <[email protected]> Co-authored-by: Joen A <[email protected]>

ashwin-pc added 3 commits May 1, 2019 02:51

added table of contents block

5c910e8

fix block warning

d6050ad

Added toc fixture

225990f

ashwin-pc requested review from aduth, ajitbohra, gziolo, jorgefilipecosta, nerrad, noisysocks, notnownikki, ntwb, Soean, talldan and youknowriad as code owners May 3, 2019 19:11

removed the outline for link and added block transform

b73a652

ashwin-pc closed this May 3, 2019

ashwin-pc reopened this May 3, 2019

swissspidy reviewed May 4, 2019

View reviewed changes

gziolo added New Block Suggestion for a new block Needs Design Needs design efforts. [Type] Technical Prototype Offers a technical exploration into an idea as an example of what's possible labels May 6, 2019

gziolo requested review from melchoyce, mapk and karmatosed May 6, 2019 09:01

itsjusteileen mentioned this pull request Jun 3, 2020

Planning for Table of Content Block Functionality and Heading IDs #22874

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add/table of contents #15426

Add/table of contents #15426

ashwin-pc commented May 3, 2019 •

edited

Loading

swissspidy May 4, 2019

swissspidy May 4, 2019

ashwin-pc May 7, 2019

thisislawatts Dec 23, 2019

eriktdesign Jan 19, 2020

swissspidy May 4, 2019

swissspidy May 4, 2019

swissspidy May 4, 2019

ashwin-pc May 7, 2019

swissspidy May 4, 2019

ashwin-pc May 7, 2019

swissspidy May 4, 2019

ashwin-pc May 7, 2019

	/**
	* Performs some basic cleanup of a string for use as a post slug
	*
	* This replicates some of what santize_title() does in WordPress core, but
	* is only designed to approximate what the slug will be.
	*
	* Converts whitespace, periods, forward slashes and underscores to hyphens.
	* Converts Latin-1 Supplement and Latin Extended-A letters to basic Latin
	* letters. Removes combining diacritical marks. Converts remaining string
	* to lowercase. It does not touch octets, HTML entities, or other encoded
	* characters.
	*
	* @param {string} string Title or slug to be processed
	*
	* @return {string} Processed string
	*/
	export function cleanForSlug( string ) {
	return toLower( deburr( trim( string.replace( /[\s\./_]+/g, '-' ), '-' ) ) );
	}

Add/table of contents #15426

Add/table of contents #15426

Conversation

ashwin-pc commented May 3, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

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

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

ashwin-pc commented May 3, 2019 •

edited

Loading