Adds ui placeholders for selecting publishing principles #20349

thijsoo · 2023-05-23T12:13:44Z

Context

We want users to have the option to select publishing principles.
⚠️ Please do not merge yet -- until we are sure when we want to release this ⚠️

Summary

This PR can be summarized in the following changelog entry:

Adds placeholders for publishing principle selection to the settings ui.
[@yoast/ui-library 0.1.0] Increases the z-index of the AutoSuggest component.

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

Install Query Monitor plugin.
Do the following steps with premium enabled

When checking out this PR/RC refresh a front-end page and make sure there are no notices and there are no schema changes
Go to Yoast SEO->Settings->Site representation and select organisation if it is not selected.
Add organisation name and logo or select a person and select a user.
Go to Site basics and in the third option Actionable feedback policy open the select box and make sure there is a list of all your published pages.
Select the first page and save.
Go to the frond-end and make sure there is new schema row at the bottom with key actionableFeedbackPolicy which holds the url to the page you selected.
Fill all the select boxes and make sure all the schema pieces are there. The correct naming is:
- publishingPrinciples
- ownershipFundingInfo
- actionableFeedbackPolicy
- correctionsPolicy
- ethicsPolicy
- diversityPolicy
- diversityStaffingReport
Also make sure you can only find published pages, so no draft pages, posts or other post types.
Go to front-end of home page.
Open Query monitor->Database Queries->Queries by Caller and make sure the query with Caller Yoast\W\S\R\Indexable_Repository->find_by_multiple_ids_and_type() Is only called once. And it has the Id's of your pages.
Empty one of the select options and save. Check that the schema is gone.

Reset your indexable table via the test helper.
Add the following filter to your functions.php

add_filter( 'wpseo_indexable_excluded_post_types', function( $post_types ) {
	$post_types[] = 'page';
	return $post_types;
} );

Make sure the policies still show up, now there is are database calls from WP_Post::get_instance() with your page ids.
Remove the previous filter and add the following filter and do the same check.
add_filter( 'Yoast\WP\SEO\should_index_indexables', '__return_false' );

Remove the filters.
Disable free + premium
Create a new published page
Enable free + premium
Set the new page as one of your policies and save.
Make sure the page is not present in your indexables table.
Refresh the front-end and make sure the url is there and an indexable is made.

Go to /wp-admin/admin.php?page=wpseo_page_settings#/site-basics
Click on the Add new page... select option and make sure you go to the new page page.

Install User Role Editor plugin
Go to /wp-admin/users.php?page=users-user-role-editor.php
Edit the SEO Manager role.
Go to the Pages tab and remove the edit_pages option.
Log in as a user with SEO manager role.
Make sure the Add Page select option is gone from the select fields.

Go to Yoast SEO->Settings
Use the search to look for each policy. Make sure it shows up.
Use the keyword publishing policies make sure all the options show up.

Disable premium and make sure there is a upsell over the select boxes.
Make sure the upsell link is https://yoa.st/site-policies-upsell

Relevant test scenarios

Changes should be tested with the browser console open
Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
Changes should be tested on different editors (Block/Classic/Elementor/other)
Changes should be tested on different browsers
Changes should be tested on multisite

Test instructions for QA when the code is in the RC

QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

I have written documentation for this change.

Quality assurance

I have tested this code to the best of my abilities.
During testing, I had activated all plugins Yoast SEO provides integrations for.
I have added unit tests to verify the code works as intended.
If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
I have written this PR in accordance with my team's definition of done.

Innovation

No innovation project is applicable for this PR.
This PR falls under an innovation project. I have attached the innovation label and noted the work hours.

Fixes #

coveralls · 2023-05-23T12:35:52Z

Pull Request Test Coverage Report for Build 5210243519

0 of 27 (0.0%) changed or added relevant lines in 2 files are covered.
839 unchanged lines in 8 files lost coverage.
Overall coverage increased (+0.002%) to 40.052%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
inc/options/class-wpseo-option-titles.php	0	7	0.0%
src/integrations/settings-integration.php	0	20	0.0%

Files with Coverage Reduction	New Missed Lines	%
inc/options/class-wpseo-option-titles.php	1	8.88%
src/analytics/application/to-be-cleaned-indexables-collector.php	1	68.97%
admin/class-admin-asset-manager.php	2	7.33%
admin/class-config.php	20	0%
inc/options/class-wpseo-option-wpseo.php	65	0%
src/integrations/admin/helpscout-beacon.php	80	0%
inc/class-wpseo-admin-bar-menu.php	154	6.85%
src/generated/container.php	516	0%

Totals
Change from base Build 5110870728:	0.002%
Covered Lines:	9624
Relevant Lines:	24029

💛 - Coveralls

leonidasmi

CR: 🚫

Aside from the below, I also noticed:

There's no way to unselect an option. Meaning, if a page is selected for a policy, there's no way to clear that (only via the Reset Options, in the Test Helper)

I think we need to tackle that too :)

inc/options/class-wpseo-option-titles.php

leonidasmi · 2023-05-29T12:26:40Z

packages/ui-library/src/elements/autocomplete/style.css

@@ -55,7 +63,7 @@
 		.yst-autocomplete__options {
 			@apply
 			yst-absolute
-			yst-z-10
+			yst-z-20


Is this expected to potentially change any UI behavior of other parts of the plugins or Shopify? If so, they need to be added in the Impact check and/or inform the Shopify team

Yes this component is only used here and in the user picker, as well in shopifiy. and there is no change in existing UI :) Since this was only needed when this component is all the way at the bottom of the screen.

This seems to be more an issue with our save footer having the same Z value of 10. But I suppose it makes sense to move our UI library to a step higher for the "popup" things. Maybe good to create an issue for the modal and select too then.
However, you should add a changelog entry for this then. Changing the style is a user-facing thing for the UI library.

src/integrations/settings-integration.php

packages/js/src/settings/components/formik-user-select-field.js

packages/js/src/settings/store/pages.js

packages/js/src/settings/components/formik-page-select-field.js

packages/js/src/settings/store/index.js

src/integrations/settings-integration.php

leonidasmi · 2023-06-02T08:53:00Z

src/integrations/settings-integration.php

+		$policies = $this->maybe_add_policy( $policies, $settings['wpseo_titles']['diversity_policy_id'], 'diversity_policy_id' );
+		$policies = $this->maybe_add_policy( $policies, $settings['wpseo_titles']['diversity_staffing_report_id'], 'diversity_staffing_report_id' );
+
+		$policies = $this->append_newest_posts( $policies );


Considering we no longer are under time pressure to deliver this, I think this solution can be improved, eveν though it does solve the underlying issue of not showing other pages if there's one already selected for any of the options.

The issues I see with this solution:

What I mentioned with no preparing those pages.

The wpseoScriptData.preferences.siteBasicsPolicies contains a weird mixture of selected policy pages and 10 published pages.

We're adding a blocking query upon loading the Settings page (that of quering 10 public posts) and I think we would better have this behind a JS fetch.

I see with the previous solution, we already do a call to the pages endpoint upon page load via JS, so I would explore the possibility to enhance that flow instead, in order to update each option's suggestions with the results of that call.

Removed this and fixed in JS. 1 front-end request and the policies that are comming from the backend are only the ones you choose :)

src/integrations/settings-integration.php

igorschoester

CR 🏗️

Some comments, from a JS perspective 😉

packages/js/src/settings/store/pages.js

packages/js/src/settings/components/formik-page-select-field.js

igorschoester · 2023-06-05T10:42:32Z

packages/ui-library/src/elements/autocomplete/style.css

@@ -55,7 +63,7 @@
 		.yst-autocomplete__options {
 			@apply
 			yst-absolute
-			yst-z-10
+			yst-z-20


This seems to be more an issue with our save footer having the same Z value of 10. But I suppose it makes sense to move our UI library to a step higher for the "popup" things. Maybe good to create an issue for the modal and select too then.
However, you should add a changelog entry for this then. Changing the style is a user-facing thing for the UI library.

src/integrations/settings-integration.php

packages/js/src/settings/store/pages.js

packages/js/src/settings/components/formik-page-select-field.js

packages/js/src/settings/store/pages.js

igorschoester

CR ✅

vraja-pro · 2023-06-07T11:17:10Z

I have checked out both free and premium branches, premium disabled, went to Yoast SEO->Settings->Site basics
I'm getting errors in the console:

Warning: Received false for a non-boolean attribute content.
Warning: Unknown event handler property onAddTag. It will be ignored.
Warning: Unknown event handler property onRemoveTag. It will be ignored.

vraja-pro · 2023-06-08T13:09:40Z

AC ✅

d-claassen · 2023-08-11T08:52:09Z

@thijsoo I'm temporarily switching around changelog labels for UI library changelog generation. 😇

d-claassen · 2023-08-11T11:47:47Z

Release done, changelog labels switched back! 🔁

thijsoo added 7 commits May 5, 2023 09:15

Start implementing post selector.

082e7a7

re-add code.

e54a3b2

Update form components.

3efd453

Update ui libarary css

e055d6c

Move to site basics.

2a80f92

Start moving to site basics.

dc4720e

Also include already chosen policies.

9032e6b

thijsoo added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label May 23, 2023

thijsoo requested a review from a team as a code owner May 23, 2023 12:13

thijsoo added 2 commits May 23, 2023 14:26

CS.

ad45cbf

cs?

8d08fe1

thijsoo and others added 6 commits May 23, 2023 14:45

CS.

fa592a6

jslint.

eacccc9

Change copy and refactor to pages.

0978087

eslint.

1c7cfed

Keywords.

97b7813

Merge branch 'trunk' into 164-support-publishing-principles-schema

d0c4381

leonidasmi reviewed May 30, 2023

View reviewed changes

thijsoo added 4 commits May 31, 2023 10:05

Start on feedback.

3c53ebf

Feedback for CR

ab13893

Allow reseting the values

ac4cc40

Lint?

4b58f59

thijsoo added the UI change PRs that result in a change in the UI label Jun 2, 2023

leonidasmi reviewed Jun 2, 2023

View reviewed changes

thijsoo added 2 commits June 5, 2023 10:08

Revert adding policies via PHP.

bcd1376

Add abord controller to fetching pages.

3e048fe

igorschoester requested changes Jun 5, 2023

View reviewed changes

thijsoo added 2 commits June 6, 2023 11:07

Updating for feedback and copy.

15eccfc

Feedback Igor.

f2e59b9

igorschoester approved these changes Jun 7, 2023

View reviewed changes

thijsoo mentioned this pull request Jun 7, 2023

Empty commit for changelog #20401

Open

16 tasks

Add dummy for selectboxes.

472c248

thijsoo added this to the 20.11 milestone Jun 20, 2023

thijsoo merged commit 68928cd into trunk Jun 20, 2023

thijsoo deleted the 164-support-publishing-principles-schema branch June 20, 2023 11:25

d-claassen added changelog: enhancement Needs to be included in the 'Enhancements' category in the changelog and removed changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog labels Aug 11, 2023

d-claassen added changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog and removed changelog: enhancement Needs to be included in the 'Enhancements' category in the changelog labels Aug 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds ui placeholders for selecting publishing principles #20349

Adds ui placeholders for selecting publishing principles #20349

thijsoo commented May 23, 2023 •

edited by d-claassen

Loading

coveralls commented May 23, 2023 •

edited

Loading

leonidasmi left a comment •

edited

Loading

leonidasmi May 29, 2023

thijsoo May 31, 2023

igorschoester Jun 5, 2023

leonidasmi Jun 2, 2023

thijsoo Jun 5, 2023

igorschoester left a comment

igorschoester Jun 5, 2023

igorschoester left a comment

vraja-pro commented Jun 7, 2023 •

edited

Loading

vraja-pro commented Jun 8, 2023

d-claassen commented Aug 11, 2023

d-claassen commented Aug 11, 2023

Adds ui placeholders for selecting publishing principles #20349

Adds ui placeholders for selecting publishing principles #20349

Conversation

thijsoo commented May 23, 2023 • edited by d-claassen Loading

Context

Summary

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

UI changes

Other environments

Documentation

Quality assurance

Innovation

coveralls commented May 23, 2023 • edited Loading

Pull Request Test Coverage Report for Build 5210243519

💛 - Coveralls

leonidasmi left a comment • edited Loading

Choose a reason for hiding this comment

leonidasmi May 29, 2023

Choose a reason for hiding this comment

thijsoo May 31, 2023

Choose a reason for hiding this comment

igorschoester Jun 5, 2023

Choose a reason for hiding this comment

leonidasmi Jun 2, 2023

Choose a reason for hiding this comment

thijsoo Jun 5, 2023

Choose a reason for hiding this comment

igorschoester left a comment

Choose a reason for hiding this comment

igorschoester Jun 5, 2023

Choose a reason for hiding this comment

igorschoester left a comment

Choose a reason for hiding this comment

vraja-pro commented Jun 7, 2023 • edited Loading

vraja-pro commented Jun 8, 2023

d-claassen commented Aug 11, 2023

d-claassen commented Aug 11, 2023

thijsoo commented May 23, 2023 •

edited by d-claassen

Loading

coveralls commented May 23, 2023 •

edited

Loading

leonidasmi left a comment •

edited

Loading

vraja-pro commented Jun 7, 2023 •

edited

Loading