From fc76d1b483e0847e33c3be8e253e86b4ed7646b7 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Wed, 18 Sep 2024 09:16:24 +0200 Subject: [PATCH 01/15] Add password field --- packages/fields/README.md | 4 + packages/fields/src/fields/index.ts | 1 + packages/fields/src/fields/password/edit.tsx | 78 +++++++++++++++++++ packages/fields/src/fields/password/index.tsx | 21 +++++ 4 files changed, 104 insertions(+) create mode 100644 packages/fields/src/fields/password/edit.tsx create mode 100644 packages/fields/src/fields/password/index.tsx diff --git a/packages/fields/README.md b/packages/fields/README.md index 5fd1031b50fe2..e5fa8851fc5b2 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -50,6 +50,10 @@ Undocumented declaration. This field is used to display the post parent. +### passwordField + +Undocumented declaration. + ### permanentlyDeletePost Undocumented declaration. diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts index 9f1abef0417f4..29cbdeb2a4ba6 100644 --- a/packages/fields/src/fields/index.ts +++ b/packages/fields/src/fields/index.ts @@ -3,3 +3,4 @@ export { default as titleField } from './title'; export { default as orderField } from './order'; export { default as featuredImageField } from './featured-image'; export { default as parentField } from './parent'; +export { default as passwordField } from './password'; diff --git a/packages/fields/src/fields/password/edit.tsx b/packages/fields/src/fields/password/edit.tsx new file mode 100644 index 0000000000000..cc4fbb1b51dc4 --- /dev/null +++ b/packages/fields/src/fields/password/edit.tsx @@ -0,0 +1,78 @@ +/** + * WordPress dependencies + */ +import { + CheckboxControl, + __experimentalVStack as VStack, + TextControl, + BaseControl, + VisuallyHidden, +} from '@wordpress/components'; +import type { DataFormControlProps } from '@wordpress/dataviews'; +import { useState } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { BasePost } from '../../types'; + +function PasswordEdit( { + data, + onChange, + field, + hideLabelFromVision, +}: DataFormControlProps< BasePost > ) { + const { label } = field; + const [ showPassword, setShowPassword ] = useState( !! data.password ); + + const handleTogglePassword = ( value: boolean ) => { + setShowPassword( value ); + if ( ! value ) { + onChange( { password: '' } ); + } + }; + + return ( + + { ! hideLabelFromVision && ( + + { label } + + ) } + { hideLabelFromVision && ( + { label } + ) } + + { showPassword && ( +
+ + onChange( { + password: value, + } ) + } + value={ data.password || '' } + placeholder={ __( 'Use a secure password' ) } + type="text" + __next40pxDefaultSize + __nextHasNoMarginBottom + maxLength={ 255 } + /> +
+ ) } + + ); +} +export default PasswordEdit; diff --git a/packages/fields/src/fields/password/index.tsx b/packages/fields/src/fields/password/index.tsx new file mode 100644 index 0000000000000..e9c72958388b5 --- /dev/null +++ b/packages/fields/src/fields/password/index.tsx @@ -0,0 +1,21 @@ +/** + * WordPress dependencies + */ +import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { BasePost } from '../../types'; +import PasswordEdit from './edit'; + +const passwordField: Field< BasePost > = { + id: 'password', + label: __( 'Password' ), + getValue: ( { item } ) => item.password, + isValid: ( { status } ) => status !== 'private', + Edit: PasswordEdit, +}; + +export default passwordField; From 5dad0685af361f0fdedc10dd8c4725f987cff435 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Wed, 18 Sep 2024 09:17:36 +0200 Subject: [PATCH 02/15] Use password field in page data form --- packages/edit-site/src/components/post-edit/index.js | 12 ++++++++++++ .../edit-site/src/components/post-fields/index.js | 2 ++ 2 files changed, 14 insertions(+) diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index a2b3007757e42..e922973d8f43f 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/packages/edit-site/src/components/post-edit/index.js @@ -63,12 +63,24 @@ function PostEditForm( { postType, postId } ) { fields: [ 'featured_media', 'title', + 'status_and_visibility', 'author', 'date', 'slug', 'parent', 'comment_status', ], + layout: { + combinedFields: [ + { + id: 'status_and_visibility', + label: 'Status & Visibility', + children: [ 'status', 'password' ], + direction: 'vertical', + render: ( { item } ) => item.status, + }, + ], + }, }; const fieldsWithBulkEditSupport = [ diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 7a52b05321794..2469c7731b226 100644 --- a/packages/edit-site/src/components/post-fields/index.js +++ b/packages/edit-site/src/components/post-fields/index.js @@ -27,6 +27,7 @@ import { import { __experimentalHStack as HStack, Icon } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; +import { passwordField } from '@wordpress/fields'; /** * Internal dependencies @@ -348,6 +349,7 @@ function usePostFields( viewType ) { }, ], }, + passwordField, ], [ authors, viewType, frontPageId, postsPageId ] ); From 83bf28abccd4d25823a933a9777d6fccf4cefa1c Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Thu, 19 Sep 2024 10:15:23 +0200 Subject: [PATCH 03/15] Small change around hideLabelFromVision and styling fix --- .../src/components/dataform-combined-edit/style.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/dataviews/src/components/dataform-combined-edit/style.scss b/packages/dataviews/src/components/dataform-combined-edit/style.scss index 0b59cbc9a4776..97e052ed89798 100644 --- a/packages/dataviews/src/components/dataform-combined-edit/style.scss +++ b/packages/dataviews/src/components/dataform-combined-edit/style.scss @@ -9,4 +9,8 @@ &__field { flex: 1 1 auto; } + + p.components-base-control__help:has(.components-checkbox-control__help) { + margin-top: $grid-unit-05; + } } From e132f9522c19d9ad809e68f5b25c89f68b95e9b0 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Thu, 19 Sep 2024 11:25:01 +0200 Subject: [PATCH 04/15] Stop relying on isValid for visibility --- .../src/components/post-edit/index.js | 62 ++++++++++++------- packages/fields/src/fields/password/index.tsx | 1 - 2 files changed, 38 insertions(+), 25 deletions(-) diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index e922973d8f43f..2a261b64e2958 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/packages/edit-site/src/components/post-edit/index.js @@ -58,30 +58,6 @@ function PostEditForm( { postType, postId } ) { } ), [ _fields ] ); - const form = { - type: 'panel', - fields: [ - 'featured_media', - 'title', - 'status_and_visibility', - 'author', - 'date', - 'slug', - 'parent', - 'comment_status', - ], - layout: { - combinedFields: [ - { - id: 'status_and_visibility', - label: 'Status & Visibility', - children: [ 'status', 'password' ], - direction: 'vertical', - render: ( { item } ) => item.status, - }, - ], - }, - }; const fieldsWithBulkEditSupport = [ 'title', @@ -91,6 +67,44 @@ function PostEditForm( { postType, postId } ) { 'comment_status', ]; + const form = useMemo( + () => ( { + type: 'panel', + fields: [ + 'featured_media', + 'title', + 'status_and_visibility', + 'author', + 'date', + 'slug', + 'parent', + 'comment_status', + ], + layout: { + combinedFields: [ + { + id: 'status_and_visibility', + label: 'Status & Visibility', + children: [ 'status', 'password' ].filter( + ( child ) => { + if ( + child === 'password' && + ids.length === 1 && + record.status === 'private' + ) { + return false; + } + return true; + } + ), + direction: 'vertical', + render: ( { item } ) => item.status, + }, + ], + }, + } ), + [ ids, record.status ] + ); const onChange = ( edits ) => { for ( const id of ids ) { if ( diff --git a/packages/fields/src/fields/password/index.tsx b/packages/fields/src/fields/password/index.tsx index e9c72958388b5..cd0775c944fad 100644 --- a/packages/fields/src/fields/password/index.tsx +++ b/packages/fields/src/fields/password/index.tsx @@ -14,7 +14,6 @@ const passwordField: Field< BasePost > = { id: 'password', label: __( 'Password' ), getValue: ( { item } ) => item.password, - isValid: ( { status } ) => status !== 'private', Edit: PasswordEdit, }; From a4c0d855a8656ebc3c7d18424b328619dc065d20 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Thu, 19 Sep 2024 11:48:22 +0200 Subject: [PATCH 05/15] Disable sorting and hiding so it doesn't show in DataViews --- packages/fields/src/fields/password/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/fields/src/fields/password/index.tsx b/packages/fields/src/fields/password/index.tsx index cd0775c944fad..79e2974be0e93 100644 --- a/packages/fields/src/fields/password/index.tsx +++ b/packages/fields/src/fields/password/index.tsx @@ -15,6 +15,8 @@ const passwordField: Field< BasePost > = { label: __( 'Password' ), getValue: ( { item } ) => item.password, Edit: PasswordEdit, + enableSorting: false, + enableHiding: false, }; export default passwordField; From b21e81de29ef26b63ce298fd1bfeba7f7cfa3bb3 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Tue, 29 Oct 2024 13:56:08 +0000 Subject: [PATCH 06/15] Add translation --- packages/edit-site/src/components/post-edit/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index 2a261b64e2958..12c307acbbbb4 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/packages/edit-site/src/components/post-edit/index.js @@ -84,7 +84,7 @@ function PostEditForm( { postType, postId } ) { combinedFields: [ { id: 'status_and_visibility', - label: 'Status & Visibility', + label: __( 'Status & Visibility' ), children: [ 'status', 'password' ].filter( ( child ) => { if ( From 34dcc0728febc5aeb4f5cabc34c51aea3a41c558 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Tue, 29 Oct 2024 14:09:38 +0000 Subject: [PATCH 07/15] Remove old layout config for combined fields --- .../src/components/post-edit/index.js | 42 +++++++++---------- 1 file changed, 19 insertions(+), 23 deletions(-) diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index 12c307acbbbb4..5a94b84cbea9c 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/packages/edit-site/src/components/post-edit/index.js @@ -80,30 +80,26 @@ function PostEditForm( { postType, postId } ) { 'parent', 'comment_status', ], - layout: { - combinedFields: [ - { - id: 'status_and_visibility', - label: __( 'Status & Visibility' ), - children: [ 'status', 'password' ].filter( - ( child ) => { - if ( - child === 'password' && - ids.length === 1 && - record.status === 'private' - ) { - return false; - } - return true; - } - ), - direction: 'vertical', - render: ( { item } ) => item.status, - }, - ], - }, + combinedFields: [ + { + id: 'status_and_visibility', + label: __( 'Status & Visibility' ), + children: [ 'status', 'password' ].filter( ( child ) => { + if ( + child === 'password' && + ids.length === 1 && + record.status === 'private' + ) { + return false; + } + return true; + } ), + direction: 'vertical', + render: ( { item } ) => item.status, + }, + ], } ), - [ ids, record.status ] + [ ids, record?.status ] ); const onChange = ( edits ) => { for ( const id of ids ) { From 1a5147a494f1a64e08d77468737b786d6cfe6ad2 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Tue, 29 Oct 2024 14:17:08 +0000 Subject: [PATCH 08/15] Move bulk edit filtering up to useMemo --- .../edit-site/src/components/post-edit/index.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index 5a94b84cbea9c..b2bccebda81e7 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/packages/edit-site/src/components/post-edit/index.js @@ -79,7 +79,11 @@ function PostEditForm( { postType, postId } ) { 'slug', 'parent', 'comment_status', - ], + ].filter( + ( field ) => + ids.length === 1 || + fieldsWithBulkEditSupport.includes( field ) + ), combinedFields: [ { id: 'status_and_visibility', @@ -139,16 +143,7 @@ function PostEditForm( { postType, postId } ) { - fieldsWithBulkEditSupport.includes( field ) - ), - } - } + form={ form } onChange={ onChange } /> From 5d1234eda5825358eb58625ad62736d0d1063d73 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Tue, 29 Oct 2024 14:21:18 +0000 Subject: [PATCH 09/15] Update import --- packages/edit-site/src/components/post-fields/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 2469c7731b226..e659a4f96f23f 100644 --- a/packages/edit-site/src/components/post-fields/index.js +++ b/packages/edit-site/src/components/post-fields/index.js @@ -8,7 +8,12 @@ import clsx from 'clsx'; */ import { __, sprintf } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; -import { featuredImageField, slugField, parentField } from '@wordpress/fields'; +import { + featuredImageField, + slugField, + parentField, + passwordField, +} from '@wordpress/fields'; import { createInterpolateElement, useMemo, @@ -27,7 +32,6 @@ import { import { __experimentalHStack as HStack, Icon } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; -import { passwordField } from '@wordpress/fields'; /** * Internal dependencies From c969697242e70026f30fbb210a9a5583da642228 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Tue, 29 Oct 2024 14:33:07 +0000 Subject: [PATCH 10/15] Update class name --- packages/fields/src/fields/password/edit.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fields/src/fields/password/edit.tsx b/packages/fields/src/fields/password/edit.tsx index cc4fbb1b51dc4..24f024abd5805 100644 --- a/packages/fields/src/fields/password/edit.tsx +++ b/packages/fields/src/fields/password/edit.tsx @@ -37,7 +37,7 @@ function PasswordEdit( { { ! hideLabelFromVision && ( @@ -55,7 +55,7 @@ function PasswordEdit( { onChange={ handleTogglePassword } /> { showPassword && ( -
+
From 67fa0b80fbe0d4305f20a39859ad4cfcc5b772db Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Thu, 31 Oct 2024 10:28:58 +0100 Subject: [PATCH 11/15] Update to use new isVisible function --- .../src/components/post-edit/index.js | 29 +++++++------------ packages/fields/src/fields/password/index.tsx | 1 + 2 files changed, 11 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/post-edit/index.js b/packages/edit-site/src/components/post-edit/index.js index b2bccebda81e7..fbff29ed67afa 100644 --- a/packages/edit-site/src/components/post-edit/index.js +++ b/packages/edit-site/src/components/post-edit/index.js @@ -23,6 +23,14 @@ import { unlock } from '../../lock-unlock'; const { PostCardPanel } = unlock( editorPrivateApis ); +const fieldsWithBulkEditSupport = [ + 'title', + 'status', + 'date', + 'author', + 'comment_status', +]; + function PostEditForm( { postType, postId } ) { const ids = useMemo( () => postId.split( ',' ), [ postId ] ); const { record } = useSelect( @@ -59,14 +67,6 @@ function PostEditForm( { postType, postId } ) { [ _fields ] ); - const fieldsWithBulkEditSupport = [ - 'title', - 'status', - 'date', - 'author', - 'comment_status', - ]; - const form = useMemo( () => ( { type: 'panel', @@ -88,22 +88,13 @@ function PostEditForm( { postType, postId } ) { { id: 'status_and_visibility', label: __( 'Status & Visibility' ), - children: [ 'status', 'password' ].filter( ( child ) => { - if ( - child === 'password' && - ids.length === 1 && - record.status === 'private' - ) { - return false; - } - return true; - } ), + children: [ 'status', 'password' ], direction: 'vertical', render: ( { item } ) => item.status, }, ], } ), - [ ids, record?.status ] + [ ids ] ); const onChange = ( edits ) => { for ( const id of ids ) { diff --git a/packages/fields/src/fields/password/index.tsx b/packages/fields/src/fields/password/index.tsx index 79e2974be0e93..8f4f704909c36 100644 --- a/packages/fields/src/fields/password/index.tsx +++ b/packages/fields/src/fields/password/index.tsx @@ -17,6 +17,7 @@ const passwordField: Field< BasePost > = { Edit: PasswordEdit, enableSorting: false, enableHiding: false, + isVisible: ( item ) => item.status !== 'private', }; export default passwordField; From 0f1b2dde30be01ffaf3bbaceeb82add950b18ac3 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Thu, 31 Oct 2024 10:33:16 +0100 Subject: [PATCH 12/15] Remove duplicate label in password field and add type --- packages/fields/src/fields/password/edit.tsx | 18 +----------------- packages/fields/src/fields/password/index.tsx | 3 +-- 2 files changed, 2 insertions(+), 19 deletions(-) diff --git a/packages/fields/src/fields/password/edit.tsx b/packages/fields/src/fields/password/edit.tsx index 24f024abd5805..be8e9fe396c9d 100644 --- a/packages/fields/src/fields/password/edit.tsx +++ b/packages/fields/src/fields/password/edit.tsx @@ -5,8 +5,6 @@ import { CheckboxControl, __experimentalVStack as VStack, TextControl, - BaseControl, - VisuallyHidden, } from '@wordpress/components'; import type { DataFormControlProps } from '@wordpress/dataviews'; import { useState } from '@wordpress/element'; @@ -17,13 +15,7 @@ import { __ } from '@wordpress/i18n'; */ import type { BasePost } from '../../types'; -function PasswordEdit( { - data, - onChange, - field, - hideLabelFromVision, -}: DataFormControlProps< BasePost > ) { - const { label } = field; +function PasswordEdit( { data, onChange }: DataFormControlProps< BasePost > ) { const [ showPassword, setShowPassword ] = useState( !! data.password ); const handleTogglePassword = ( value: boolean ) => { @@ -39,14 +31,6 @@ function PasswordEdit( { spacing={ 4 } className="fields-controls__password" > - { ! hideLabelFromVision && ( - - { label } - - ) } - { hideLabelFromVision && ( - { label } - ) } = { id: 'password', - label: __( 'Password' ), + type: 'text', getValue: ( { item } ) => item.password, Edit: PasswordEdit, enableSorting: false, From 770c200ce1ca648e266b4fc20aa1668094ad4e18 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Thu, 31 Oct 2024 10:38:19 +0100 Subject: [PATCH 13/15] Make use of getValue instead of directly referencing the data object --- packages/fields/src/fields/password/edit.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/fields/src/fields/password/edit.tsx b/packages/fields/src/fields/password/edit.tsx index be8e9fe396c9d..75226c1f93f15 100644 --- a/packages/fields/src/fields/password/edit.tsx +++ b/packages/fields/src/fields/password/edit.tsx @@ -15,8 +15,14 @@ import { __ } from '@wordpress/i18n'; */ import type { BasePost } from '../../types'; -function PasswordEdit( { data, onChange }: DataFormControlProps< BasePost > ) { - const [ showPassword, setShowPassword ] = useState( !! data.password ); +function PasswordEdit( { + data, + onChange, + field, +}: DataFormControlProps< BasePost > ) { + const [ showPassword, setShowPassword ] = useState( + !! field.getValue( { item: data } ) + ); const handleTogglePassword = ( value: boolean ) => { setShowPassword( value ); @@ -47,7 +53,7 @@ function PasswordEdit( { data, onChange }: DataFormControlProps< BasePost > ) { password: value, } ) } - value={ data.password || '' } + value={ field.getValue( { item: data } ) || '' } placeholder={ __( 'Use a secure password' ) } type="text" __next40pxDefaultSize From 02b8eb0c38b1c7ab7bd9ff3f26db867feb7549e4 Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Thu, 31 Oct 2024 10:56:48 +0100 Subject: [PATCH 14/15] Add border for password field in dataforms combined edit. --- packages/edit-site/src/components/post-edit/style.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/edit-site/src/components/post-edit/style.scss b/packages/edit-site/src/components/post-edit/style.scss index 4eaa41b2e8ed7..5688d83df00c5 100644 --- a/packages/edit-site/src/components/post-edit/style.scss +++ b/packages/edit-site/src/components/post-edit/style.scss @@ -7,3 +7,10 @@ justify-content: center; } } + +.dataforms-layouts-panel__field-dropdown { + .fields-controls__password { + border-top: $border-width solid $gray-200; + padding-top: $grid-unit-20; + } +} From 6abc19e492b8b778be8a301d7798e51fe8f47b2e Mon Sep 17 00:00:00 2001 From: Lourens Schep Date: Thu, 31 Oct 2024 11:15:08 +0100 Subject: [PATCH 15/15] Add JSDoc for password field export and update README --- packages/fields/README.md | 2 +- packages/fields/src/fields/password/index.tsx | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/fields/README.md b/packages/fields/README.md index e5fa8851fc5b2..214f3d6ee3a50 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -52,7 +52,7 @@ This field is used to display the post parent. ### passwordField -Undocumented declaration. +This field is used to display the post password. ### permanentlyDeletePost diff --git a/packages/fields/src/fields/password/index.tsx b/packages/fields/src/fields/password/index.tsx index e8d55c08af2ab..aa7bc57e3f7ca 100644 --- a/packages/fields/src/fields/password/index.tsx +++ b/packages/fields/src/fields/password/index.tsx @@ -19,4 +19,7 @@ const passwordField: Field< BasePost > = { isVisible: ( item ) => item.status !== 'private', }; +/** + * This field is used to display the post password. + */ export default passwordField;