Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Link settings extensibility #13190

Open
wants to merge 11 commits into
base: master
from

Conversation

Projects
None yet
@Xyfi
Copy link
Contributor

commented Jan 4, 2019

Description

Adds the possibility to expand the inline link settings via Slot/Fill and alter the link's attributes.

To achieve this I had to refactor the logic that determined the link's attributes because the only possibility was to change the link to an external link.

While working on this I found out that the aria-label logic is broken. The label will always be (opens in new window).

How has this been tested?

Add the NoFollowToggleWrapper somewhere in your code and make sure the component is always rendered. I simply copied it into packages/format-library/src/inline.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>
	);
}

Screenshots

screen shot 2019-01-04 at 15 47 14

Types of changes

New feature.

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.

@Xyfi Xyfi force-pushed the add/link-settings-extensibility branch 2 times, most recently from 7174da7 to dfaa108 Jan 7, 2019

@IreneStr IreneStr requested a review from WordPress/gutenberg-core Jan 7, 2019

@atimmer atimmer requested a review from ellatrix Jan 7, 2019

@Chrico

This comment has been minimized.

Copy link

commented Jan 9, 2019

Howdy,

any news here about the state or if something is missing? Is there already a scheudule when this will be included into Gutenberg? Currently there are a lot of options which could be possible be added to the LinkSettings to support e.G. custom data-attributes for tracking or even kind of theming to open modals.

@Soean

This comment has been minimized.

Copy link
Member

commented Jan 9, 2019

@Xyfi Can you add the No Follow example to the docs?

@youknowriad youknowriad added this to the 5.0 (Gutenberg) milestone Jan 9, 2019

@designsimply

This comment has been minimized.

Copy link
Contributor

commented Jan 9, 2019

Noting a related discussion from the #core-editor meeting in WP Slack today: https://wordpress.slack.com/archives/C02QB2JS7/p1547046547434300

@Xyfi Xyfi force-pushed the add/link-settings-extensibility branch from 85f71a9 to 1e10b34 Jan 15, 2019

Xyfi added some commits Jan 4, 2019

@Xyfi Xyfi force-pushed the add/link-settings-extensibility branch from 1e10b34 to 8273c4c Jan 16, 2019

@IreneStr IreneStr requested review from ellatrix and WordPress/gutenberg-core Jan 17, 2019

@mcsf

This comment has been minimized.

Copy link
Contributor

commented Jan 22, 2019

While working on this I found out that the aria-label logic is broken. The label will always be (opens in new window).

See #12325

@GlennMartin1

This comment has been minimized.

Copy link

commented Feb 4, 2019

+1 to have this feature ASAP.

Any ETA? 5.1?

@mapk

This comment has been minimized.

Copy link
Contributor

commented Feb 5, 2019

I'd like to point to #10128 in an effort to keep the styling and interaction consistent. This is what that interaction looks like.

link-button

@gziolo

This comment has been minimized.

Copy link
Member

commented Feb 6, 2019

I'd like to point to #10128 in an effort to keep the styling and interaction consistent. This is what that interaction looks like.

This makes me wonder whether we should include more options it in the core by default without adding the overhead of slots and fills. Maybe we should add more options under 3 dots menu based on this PR and Button block. In particular, in the case of the Button block, these Link Settings sections feel super disconnected from the UI. We should think about the flow when someone has to use the keyboard to set link rel after providing url. I think it would be super annoying to tab as much to edit related settings.

@raquelmsmith

This comment has been minimized.

Copy link
Contributor

commented Mar 5, 2019

Bump and +1 on this. Many, many bloggers rely on the ability to add rel="nofollow" to their links for sponsored and affiliate links. We used to add it with our plugin but now we are unable to provide that functionality. I don't have a strong opinion on whether it should be included in WordPress Core, but there at least needs to be the ability to add that feature in a plugin.

This is an important SEO consideration for all bloggers who use WordPress to make money through any sort of sponsored or affiliate content.

@youknowriad youknowriad removed this from the 5.3 (Gutenberg) milestone Mar 18, 2019

@danielbachhuber

This comment has been minimized.

Copy link
Member

commented Apr 16, 2019

@youknowriad @gziolo Can you summarize what needs to be done in order to land this pull request, or whether there's a suggested workaround to allow rel=nofollow attributes to be added with UI?

@wormeyman

This comment has been minimized.

Copy link

commented Apr 23, 2019

Please please land this! @Xyfi is there a way for us to include it now easily on our own sites?

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented May 6, 2019

Due to the precedent in terms of extensibility this PR creates, I'd like to suggest we land the "nofolllow" option as part of the core link modal as a first step.

@jdcauley

This comment has been minimized.

Copy link

commented May 17, 2019

What are the odds that this will be added to the core link modal in the near future, it solves a significant problem for a large number of users.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.