All notable changes to this project will be documented in this file. We follow Semantic Versioning.
- Deprecates
OnboardingWizard,MessageBox,LoadingIndicator. Use the@yoast/configuration-wizardinstead.
- Changes the look of the KeyphraseInput component's errors.
- Improves accessibility of the KeyphraseInput component's errors list.
- Adds a
hasErrorprop to the KeywordInput component.
- Fixes a bug where the YoastReactSelect component would not show the border and inner shadow correctly.
- Fixes a bug where the font size and weight for the KeywordInput label would not be set correctly.
- Adds a label to the internal linking suggestions, indicating the post type or taxonomy name of the suggested post or term.
- Changes the message the user receives in the internal linking suggestions container. The message now includes a notification to add a title and/or a metadescription (if those are missing) to improve the quality of internal linking suggestions.
- Changes the message the user receives in the internal linking suggestions container. The message now includes a notification to add a title and/or a metadescription (if those are missing) to improve the quality of internal linking suggestions.
- Adds a CSS test stub.
- Drops IE11 support through configuring Babel to use the preset environment with the own list of supported browsers specified.
- Removed the components related to the Help Center and the AlgoliaSearcher package
- Improves the
KeywordInputandSynonymsInputstyling for consistency with the new WordPress 5.3 admin styles.
- Fixes a bug where internal linking suggestions were not aligned correctly, but were indented instead.
- In the internal linking suggestions component, adds a check for the presence of the prominent words to determine which of the feedback strings should be rendered. If no prominent words are determined for a text (and hence no suggestions), the old message "Once you add a bit more copy..." is rendered. If prominent words are determined, but still no suggestions could be found, a new message is rendered: "We could not find any relevant articles on your website that you could link your post to.".
- Replaced babel-preset-es2015 with babel-preset-env, as babel-preset-es2015 is deprecated.
- Updates the CSS autoprefixer configuration to drop support for old Internet Explorer versions.
- Removes the margin from the
KeywordInputcomponent.
- Changes
KeywordInput'sidprop to be required
- Improved handling of the
relattribute for links that open in a new browser's tab.
- The following packages have been split out from
@yoast/yoast-components. Please use these packages in the future:@yoast/algolia-search-box@yoast/components@yoast/configuration-wizard@yoast/eslint@yoast/helpers@yoast/search-metadata-previews@yoast/social-metadata-previews@yoast/style-guide@yoast/social-previews
- Updated the
styled-componentspackage to v4+.
- Adds an autocomplete prop to the following components:
Step,Textfield, andInput.
- Restores the focus indication on the title separators in the onboarding wizard.
- Makes the previous and next buttons in the
OnboardingWizardcomponent look like links.
- Adds
keywordFormsfield to theSnippetPreviewandSnippetEditorcomponents to be able to highlight word forms of the keyphrase in the preview. - Adds step-specific hashes to the URL in the
OnboardingWizardcomponent to make navigation easier.
- Fixes a bug where the standalone would not load in IE11.
- Changed the AnalysisList pressed status check to listen to
result.markerIdinstead ofresult.id. - Upgrades webpack-dev-server to 3.1.14.
- Bumps YoastSEO.js version to 1.48.0.
- Changed the default icon for the
Collapsiblecomponent to chevrons. - Bumps YoastSEO.js version to 1.47.0.
- Adds a card component.
- Removes autocomplete functionality from the Keyphrase and Synonyms input fields.
- Bumps YoastSEO.js version to 1.46.0.
- Change eslint config to make sure tag build passes.
- Bumps YoastSEO.js version to 1.45.0.
- Adds onBlur and onFocus prop to SynonymsInput component.
- Adds buildStructuredUrl function.
- Adds an exclamation triangle to the SvgIcon component.
- Adds a YoastWarning component that consists of an exclamation triangle followed by a message on a yellow background.
- Adds an Id prop to the Collapsible and ButtonSection component.
- Removes logic that remembers what marker button is active from the
ContentAnalysiscomponents.
- Adds a fieldId prop in the
ReplacementVariableEditorStandalonecomponent, that gets added as an id attribute to the DraftJS editor element with the contenteditable attribute.
- Changes
$palette_grey_textfrom #646464 to #616161 to have a sufficient color contrast ratio on #dddddd backgrounds.
- Bumps YoastSEO.js to 1.41.1.
- Adds an
UpsellButtoncomponent. - Adds an
UpsellLinkButtoncomponent. - Adds
labelandariaLabelprops to theKeywordInputcomponent. - Adds an id to the
ReplacementVariableEditorStandalonecomponent.
- Replaces the help text in the
SynonymsInputby a help link icon.
- Compatibility with Yoast SEO 8.4.
- Compatibility with Yoast SEO 8.3.
- Compatibility with Yoast SEO 8.3.
- Fixes a bug where the placeholder "Modify your meta description by editing it right here" wasn't translatable.
- Exposes
AnalysisListto render a plain list of content analysis results. - Exposes
renderRatingToColorwhich renders a rating received from YoastSEO.js to a color that can be used in CSS.
- Fixes an incorrect import of
YoastButtoninindex.js.
- Adds a
ButtonSectioncomponent. - Adds a
loadingSpinnersvg icon.
- Fixes a bug where an invalid icon warning was thrown because no icon was provided to the
IconsButton. - Fixes a bug where only the header of the
ButtonSectioncomponent was clickable, instead of the entire component.
- Improves the keyword input field focus style and contrast ratio.
- Adds a standalone
LanguageNoticecomponent. Before, this component was part of theContentAnalysiscomponent. - Adds a
HelpTextcomponent. - Adds a label to the
KeywordInputcomponent. - Adds an
onBlurevent to theKeywordInputcomponent. - Adds a button to the
KeywordInputcomponent that allows removal of that keyword section. - Adds a
ContentOptimizationContainercomponent. - Adds a
SynonymsInputcomponent. - Adds a
CornerstoneTogglecomponent. - Adds a demo page for the SVG icons rendered by the SvgIcon component to the App.
- Adds a subtitle to the
CollapsibleHeadercomponent.
- Removes the
helpTextButtonfrom theSnippetPreviewcomponent as it has been replaced by a description that is always present.
- Fixes the styling of the
Collapsiblecomponent for right-to-left languages. - Fixes a bug where the
Collapsiblecomponent would show scrollbars in Internet Explorer 11.
- Increases the font size of the synonyms help text and changes its color.
- Makes it possible to render multi-shape SVG icons.
- Adds clipboard and a11y-speak to the package.json.
- Add setOverallSeoScore and setOverallReadabilityScore reducer.
- Add help text to the content analysis in the standalone.
- Add a IconLabeledButton component to render a button with visible textual label.
- Fix alignment of video in help center when no ads are present.
- Adds synonyms components.
- Fixes the CSS media query to target IE11 used for the buttons min-height.
- Removes the unused replaceKeyword action.
- Fixes a bug where console errors would be thrown because
refinstead ofinnerRefwas used in theReplacementVariableEditor.
- Adds Styled Component's
withThemeto theReplacementVariableEditorStandalonecomponent in order to set thetextDirectionalityof theEditorbased on the language direction that is passed to the theme.
- Fixes the styling of the
ModeSwitcher,SnippetEditor,HelpTextWrapper,SnippetPreviewandStyledSectionfor right-to-left languages. #629 - Fixes a bug where the snippet variable suggestions would disappear behind the admin menu bar when using a right-to-left language. #628
- Fixes the 'insert snippet variable' button alignment by using only CSS and removing the JS widths calculations. #618
ReplacementVariableEditoradds a space after replacement variable when there is no space yet. #616- Entities in
ReplacementVariableEditorcan no longer be partially selected. #607
- Improved change detection of replacement variables in
SnippetEditor. #610
- Added
ErrorBoundarycomponent to be used in theSnippetEditor. #605
- Let the padding on the
StyledSectiondepend on the title. #606 - Implements an option for the paper style in the styled section component. #612
- Moves the margin bottom from the FormSections to the CloseSnippetEditor button. #615
- Clicking the entire meta description field in
SnippetEditorwill now focus the input. #600 - Improved snippet editor placeholder contrast. #603
- Fixes an issue where in cases with a lot of snippet variables it would sometimes be partially hidden behind the WordPress toolbar. #604
- Handle cut and paste behaviour in the
ReplacementVariableEditor. #611
- Implements the draft-js-single-line-plugin in order to keep the Draft-js Editor from creating new blocks on enter presses and pasting newlines.
- Adds a meta description placeholder text.
- Adds a SettingsSnippetEditor component.
- Adds a button to the snippet editor to improve discoverability of the snippet variables.
- Removes logic for decoding separators. This logic has been moved to wordpress-seo.
- Fixes a bug where the snippet editor fields would stay in an isActive state when blurred.
- Fixes a bug where the progress bars for the snippet title and description wouldn't respond correctly to the content of the input fields.
- Fixes a bug where multiple spaces and spaces at the beginning and end of the snippet description were taken into account for the description length progress calculation.
- Fixes a bug where the snippet variable suggestions would be sometimes positioned outside of the viewport.
- Changes the replacement variable editor to automatically replace snippet variables with entities.
- Improves the Help text accessibility and introduces a SlideToggle component based on react-transition-group.
- Maximum meta description length now retrieved from
yoastseo. - Improve the Snippet Preview rendering with long text.
- Better encode SVG images used as CSS background.
- Snippet editor no longer manages the slug in local state.
- Entire meta description field can now be clicked to focus the editor.
- Removed
react-intlremnants, which was removed inv4.0.0. - Snippet preview now decodes the separator replacement variable before it is passed along to the renderer.
- Added metadescription placeholder to
SnippetEditor. - Replace the replace vars before measuring the title and description length to get the correct length.
- Fixes a problem with the Snippet Editor where it would crash when receiving new content.
- Fixes progress bars in
SnippetEditor.
- Changed library used for translation from
react-intlto@wordpress/i18n. #494, #469, #497, #498, #500, #505, #506, #507, #508
- Added
HelpTextcomponent. #480 - Added
KeywordInputcomponent. #482 - Added help text drop down to
SnippetEditor. #517
- Added trailing slashes to
SnippetPreviewurl desktop preview. #526 - Improved
SnippetEditormentions suggestions accessibility. #525 - URL safe characters are preserved in the
SnippetPreview. #520 - Transliterated keywords are highlighted in title and description in
SnippetPreview. #519, #521, #522 - The
SnippetEditorslug input field has been changed from aDraftJSeditor to a regular input field. #515 - Dashes and question marks get stripped from the
SnippetEditorurl preview. #495 - Allow optional help text to be passed to the
ContentAnalysiscomponent. #480 - Upgraded webpack to version
4.7in the development environment. #501
- Replace vars in description and title are converted to mentions on load. #529
- Implemented various styling fixes for the
SnippetEditorcomponent. #491, #513, #513
- Removed import reference to a file that no longer exists.
- Added the jsx-a11y ESLint plugin. #468
- [Collapsible] Added an optional ScreenReaderText after the Collapsible title. #450
- Added a SnippetEditor component. Renders the SnippetPreview component with editor fields to change the data. #460
- Added a ReplacementVariable component. Renders a DraftJS editor with replacement variables as entities. #460
- Added a FormattedScreenReaderMessage component Renders a message translated, but also as screen reader text. Ensures that ScreenReaderText can remain pure and only accept a string. #460
- Changed the collapsible panel to use up/down arrows instead of the right/down arrows it used. The direction of the arrow now also matches Gutenberg. #463
- [AnalysisCollapsible] Center SVG angles in AnalysisCollapsible. #462
- Updated all dependencies that only had a minor or patch update. #453
- Added "$color_noindex":"#1e8cbe" to colors.json.
- Added Collapsible and CollapsibleStateless components.
- Added IconsButton component.
- Added YoastModal component based on react-modal to handle all the modal dialogs.
- Refactored AnalysisCollapsible and AnalysisCollapsibleStateless to use the new collapsible.
- Implements
SnippetPreviewcomponent. This component will show a representation of how Google will show a certain page.
- Fixed the PropType to
funcfor the dynamically supplied icon.
- Made it possible to dynamically pass an icon to the Onboarding Wizard component.
- Fixed a typo in the readme.
react-intlis now a peer dependency ofyoast-component. Updated documentation in regards to to usingreact-intl.AnalysisHeaderCollapsibleis now open by default. This means all headers inContentAnalysisare now open by default.
- Changed
SvgIcon's default propsizefrom16to16pxand correctly implemented default props.
- Adds css styles to
SvgIconcomponent to fix irregular sizing inwordpress-seo.
- Upgraded peer dependency of React to
16.2. - Removed
.svgfiles in favour ofSvgIconcomponent, as a resultsvg-react-loaderis no longer required. - Removed
composites/SnippetPreview/components/SnippetPreview.jsthat ensured backwards compatability to the newSnippetPreviewcomponent. - Changed
StyledSectionprops.
- Added
jest-styled-componentsfor better testing ofstyled-components. - Added
SvgIconcomponent.
- Upgraded peer dependency of React to
16.2. - Changed default translation
GoodtoGood resultsinContent Analysis. - Refactored
StyledSectionto usestyled-components. - Removed
.svgfiles. UseSvgIconinstead. - Removed
composites/SnippetPreview/components/SnippetPreview.jsthat ensured backwards compatability to the newSnippetPreviewcomponent.
- Adds a
marksButtonStatusprop to theContentAnalysisto disable or hide the eye buttons. #409 - Adds a
marksButtonClassNameprop to theContentAnalysisto use for the tooltips inwordpress-seo. #409
- Expands the
AnalysisCollapsiblethat is currently the most urgent in theContentAnalysis. #391
- Expands all
AnalysisCollapsiblesin theContentAnalysisby default. #393
- Made it possible to pass the heading level of the
analysisCollapsibles as a prop to theContentAnalysis. #388 - Added a language notice in the content analysis for non-admin users that cannot change the language. #389
- Avoid to fully re-render the
AnalyisisCollapsiblecomponent to improve accessibility #386 - Fixed alignment of icons and text in the
ContentAnalysiscomponent. #390
- Added flag to run tests sequentially. #376
- Added
type="button"attribute toIconButtonToggle. #378
- Changed
StackedProgressBarheight to24px. #367 - Changed
onMarkButtonClickcallback inContentAnalysisto return empty string when marker is deselected. #375 - Made Onboarding Wizard's
previousButtonandnextButtonfocusable. #369 - Replaced old react string refs with callbacks. #365
- Remove unnecessary whitespace between
AnalysisResults and betweenAnalysisCollapsibles. #382
- Adds a callback to the mark button in the
ContentAnalysiscomponent. #372
- Removes min height from the
ContentAnalysiscomponent. #373
- Allows
AnalysisResulttext to be HTML. #366
Notificationcomponent. #348AnalysisResultcomponent. #352ContentAnalysiscomponent. #359
- Added callbacks to notify tab switch in
YoastTabs. #346 setSeoResultsForKeywordaction and reducer implementation. #355- Added default
classNametoVideoDescriptionItemcomponent. #358
IconButtonTogglecomponent
- Added class names to VideoTutorial component.
- Improved AlgoliaSearcher focus management between search and detail view.
- Help center CSS tweaks.
- Improved the
HelpCenterButtonand theHelpCenterContainerstyling. #337
- Added class names to the
HelpCenterContainerandHelpCenterButton. #337
Tablecomponent. #219SearchResultDetailcomponent. #243SearchResultscomponent. #243YoastLinkButtoncomponent. #284VideoTutorialcomponent. #291YouTubeVideocomponent. #291YoastTabscomponent. #303AllyNoticecomponent. #306HelpCentercomponent. #310HelpCenterButtoncomponent. #318
- Added translatable label to
SearchBarcomponent. #243 - Added
makeOutboundLinkutil function. #308 - Added a prop to the
AlgoliaSearchercomponent that can be used to enable live search. #323 - Added a search button and placeholder text to the
SearchBarcomponent. #323
- Improved styling and accessibility of the
SearchBarcomponent. #243 - Styling improvements for the Onboarding Wizard. #290
- Fixed two prop warnings that appeared when switching pages in the Onboarding wizard. #293 and #295
- Improved YoastButton hover and active style. #332
- Fixed the loading of AMP articles in the Algolia article iFrame.
- Added trailing slash to knowledge base URL in help center
- Added dashboard widget to development environment.
- Added class names to
WordpressFeedandSeoAssessmentcomponents, and also to their children.
Iconcomponent (usingsvg-react-loader, seeREADME.md). #218Button(#173),IconButton(##232),LinkButton(#262),YoastButton(#257) components.InputFieldcomponent (usingDraftJS). #204ListTable,RowandCellcomponent. #219ProgressBarcomponent. #172IFrameandArticleContentcomponents. #242StackedProgressBarcomponent. #270SeoScoreAssessment(s)components. #272WordpressFeedcomponent. #273SeoAssessmentcomponent. #281
- Added
getFeedRSS reader utility function. #267 - Added
ContentAnalysisreducer and actions. #224 - Added
striptagsutility library. #276 - Added various documentation. #239
- Improved development environment. (#238, #174 )
- Added max width for content in Onboarding wizard (#250), and
fullWidthproperty for full screen support (#269). - Changed Onboarding wizard header. #256
- Added paragraph for additional information to Onboard wizard
Choice component. #254
- Adds aria-current to the onboarding wizard active step.
- Removes console errors caused by using React.PropTypes and React.createClass.
- Improved README.md to instruct on using yarn instead of npm.
- [AlgoliaSearch] Added Algolia Search as a new component.
- Adds additional colors
- Changes the color blue from #0075b3 to #0066cd.
- [ConfigurationWizard] Adds possibility to disable navigation on a step page
- [ConfigurationWizard] Adds icons to next, previous and close buttons
- [ConfigurationWizard] Pass
nextStepandpreviousStepfunctions to Steps - Adds Colors for use in my.yoast
- [Choice] Adds a radio button option to the Choice components.
- [StyledSection] Removes width from StyledSection to be usable in different contexts.
- Removes width from StyledSection.
- [Loader] Adds Loader component to be used when something is occurring in the background.
- Adds Sass and JSON colors palette.
- Adds
grunt-scss-to-jsonpackage to generate the JSON colors file.
- Splits color schemes in a separate Sass file.
- Splits snippet preview colors in a separate Sass file.
- Removes, updates, and adds colors. See the related issue for a list of colors changes.
- Adds 2.0.0 as a possibility for react-tap-plugin as a peer dependency.
- Changed default server request from a PUT to a POST request.
- [StyledSection] Adds a StyledSection component. This component is used to render a HTML section including a heading with an icon.
- [CSS] Adds the
file-text-ofont awesome icon. - [utils] Exports flat
translatefunction in the i18n util.
- [Label] Adds an
aria-labelattribute. - [Choice] Passes the screenReaderText to the label as
aria-label.
- Implements HTML component. This component is used to render HTML.
- Implements Choice component. This component is used for a choice, like a group of radio buttons or a select box.
- Implements Input component. This component is used to render a text input.
- Implements Wizard component. This component is used to make a wizard from steps that include fields.
- Implements ScreenReaderText component. This component is used to create a text for use with screen readers.
- Implements ScreenReaderShortcut component. This component is used for skipping navigation to screen reader texts.
- Implements Stepper component. This component is used to create step navigation in the wizard.
- Implements StepButton component. This component is used to access a Step in the wizard.