Moved link settings extensibility documentation to separate file

WordPress · Jan 15, 2019 · c9538bc · c9538bc
1 parent 12a7ae6
commit c9538bc
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 95 deletions.
diff --git a/packages/format-library/README.md b/packages/format-library/README.md
@@ -13,98 +13,3 @@ npm install @wordpress/format-library --save
 _This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using [core-js](https://github.com/zloirock/core-js) or [@babel/polyfill](https://babeljs.io/docs/en/next/babel-polyfill) will add support for these methods. Learn more about it in [Babel docs](https://babeljs.io/docs/en/next/caveats)._
 
 <br/><br/><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>
-
-## Extensibility
-
-### Link settings
-
-You can extend the link settings by creating a Fill with the name `LinkSettings`. This fill will receive the following props allowing you to edit the link's attributes:
-
-#### setLinkAttributes( newAttributes )
-
-Callback function you can use to overwrite the link's attributes. Expects an object containing the new attributes.
-
-**Important:** This will completely overwrite the link's attributes, so it is up to the developer to properly merge the current attributes with the attributes that the newly added option is trying to introduce. For example, notice how the rel attribute is merged in the included example.
-
-#### attributes
-
-Object containing the link's current attributes.
-
-#### url
-
-The link URL.
-
-#### text
-
-The link text.
-
-### Example
-
-```js
-class NoFollowToggle extends Component {
-
-	isChecked() {
-		const { rel } = this.props.attributes;
-
-		if ( ! rel ) {
-			return false;
-		}
-
-		return rel.split( ' ' ).includes( 'nofollow' );
-	}
-
-	toggle() {
-		const { setLinkAttributes, attributes } = this.props;
-
-		const rel = attributes.rel;
-
-		if ( this.isChecked() ) {
-			if ( ! rel ) {
-				return;
-			}
-
-			const newRel = rel.split( ' ' ).filter( ( relItem ) => {
-				return relItem !== 'nofollow';
-			} ).join( ' ' );
-
-			setLinkAttributes( {
-				...attributes,
-				rel: newRel,
-			} );
-			return;
-		}
-
-		if ( ! rel ) {
-			setLinkAttributes( {
-				...attributes,
-				rel: 'nofollow',
-			} );
-		} else {
-			setLinkAttributes( {
-				...attributes,
-				rel: [ rel, 'nofollow' ].join( ' ' ),
-			} );
-		}
-	}
-
-	render() {
-		return (
-			<ToggleControl
-				label={ 'No Follow' }
-				checked={ this.isChecked() }
-				onChange={ this.toggle.bind( this ) }
-			/>
-		);
-	}
-}
-
-function NoFollowToggleWrapper() {
-	return (
-		<Fill name="LinkSettings">
-			{ ( props ) => {
-				return <NoFollowToggle { ...props } />;
-			} }
-		</Fill>
-	);
-}
-```
diff --git a/packages/format-library/src/link/README.md b/packages/format-library/src/link/README.md
@@ -0,0 +1,94 @@
+## Extensibility
+
+### Link settings
+
+You can extend the link settings by creating a Fill with the name `LinkSettings`. This fill will receive the following props allowing you to edit the link's attributes:
+
+#### setLinkAttributes( newAttributes )
+
+Callback function you can use to overwrite the link's attributes. Expects an object containing the new attributes.
+
+**Important:** This will completely overwrite the link's attributes, so it is up to the developer to properly merge the current attributes with the attributes that the newly added option is trying to introduce. For example, notice how the rel attribute is merged in the included example.
+
+#### attributes
+
+Object containing the link's current attributes.
+
+#### url
+
+The link URL.
+
+#### text
+
+The link text.
+
+### Example
+
+```js
+class NoFollowToggle extends Component {
+
+	isChecked() {
+		const { rel } = this.props.attributes;
+
+		if ( ! rel ) {
+			return false;
+		}
+
+		return rel.split( ' ' ).includes( 'nofollow' );
+	}
+
+	toggle() {
+		const { setLinkAttributes, attributes } = this.props;
+
+		const rel = attributes.rel;
+
+		if ( this.isChecked() ) {
+			if ( ! rel ) {
+				return;
+			}
+
+			const newRel = rel.split( ' ' ).filter( ( relItem ) => {
+				return relItem !== 'nofollow';
+			} ).join( ' ' );
+
+			setLinkAttributes( {
+				...attributes,
+				rel: newRel,
+			} );
+			return;
+		}
+
+		if ( ! rel ) {
+			setLinkAttributes( {
+				...attributes,
+				rel: 'nofollow',
+			} );
+		} else {
+			setLinkAttributes( {
+				...attributes,
+				rel: [ rel, 'nofollow' ].join( ' ' ),
+			} );
+		}
+	}
+
+	render() {
+		return (
+			<ToggleControl
+				label={ 'No Follow' }
+				checked={ this.isChecked() }
+				onChange={ this.toggle.bind( this ) }
+			/>
+		);
+	}
+}
+
+function NoFollowToggleWrapper() {
+	return (
+		<Fill name="LinkSettings">
+			{ ( props ) => {
+				return <NoFollowToggle { ...props } />;
+			} }
+		</Fill>
+	);
+}
+```