diff --git a/src/js/_enqueues/admin/post.js b/src/js/_enqueues/admin/post.js index d50fe6007d33b..7505134472884 100644 --- a/src/js/_enqueues/admin/post.js +++ b/src/js/_enqueues/admin/post.js @@ -689,7 +689,126 @@ jQuery( function($) { // Custom Fields postbox. if ( $('#postcustom').length ) { - $( '#the-list' ).wpList( { + var $postCustom = $( '#postcustom' ), + $newMeta = $postCustom.find( '#newmeta' ), + $addCustomFieldButton = $postCustom.find( '#add-custom-field-button' ), + $addCustomFieldHeading = $postCustom.find( '.custom-field-add-heading' ), + $addCustomFieldSubmit = $postCustom.find( '#postcustomstuff .add-custom-field' ), + $cancelNewMetaButton = $postCustom.find( '#newmeta-cancel' ), + $customFieldsNotice = $postCustom.find( '.custom-fields-notice' ), + $customFieldsNoticeMessage, + $enterNewMetaButton = $postCustom.find( '#newmeta-button' ), + $listTable = $postCustom.find( '#list-table' ), + $metaKeyInput = $postCustom.find( '#metakeyinput' ), + $metaKeySelect = $postCustom.find( '#metakeyselect' ), + $metaValue = $postCustom.find( '#metavalue' ), + clearNewMeta, + hideNewMeta, + resetMetaKeyInput, + showCustomFieldsNotice, + showMetaKeyInput, + showNewMeta; + + if ( ! $customFieldsNotice.length ) { + $customFieldsNotice = $( '
' ); + $customFieldsNotice.find( '.screen-reader-text' ).text( __( 'Dismiss this notice.' ) ); + $postCustom.find( '#postcustomstuff' ).before( $customFieldsNotice ); + } + + $customFieldsNoticeMessage = $customFieldsNotice.find( 'p' ); + + showCustomFieldsNotice = function( message ) { + if ( ! $customFieldsNotice.length ) { + return; + } + + $customFieldsNoticeMessage.text( message ); + $customFieldsNotice.removeClass( 'hidden' ); + + wp.a11y.speak( message ); + }; + + resetMetaKeyInput = function() { + if ( $metaKeySelect.length ) { + $metaKeySelect.prop( 'selectedIndex', 0 ).removeClass( 'hidden' ); + $metaKeyInput.val( '' ).addClass( 'hidden' ); + $postCustom.find( '#enternew' ).removeClass( 'hidden' ); + $postCustom.find( '#cancelnew' ).addClass( 'hidden' ); + } + }; + + showMetaKeyInput = function() { + $metaKeySelect.addClass( 'hidden' ); + $metaKeyInput.removeClass( 'hidden' ); + $postCustom.find( '#enternew' ).addClass( 'hidden' ); + $postCustom.find( '#cancelnew' ).removeClass( 'hidden' ); + $metaKeyInput.trigger( 'focus' ); + }; + + clearNewMeta = function() { + $metaValue.val( '' ); + resetMetaKeyInput(); + + if ( ! $metaKeySelect.length ) { + $metaKeyInput.val( '' ); + } + }; + + showNewMeta = function( shouldFocus ) { + $newMeta.addClass( 'is-visible' ).show(); + $addCustomFieldHeading.addClass( 'is-visible' ); + $addCustomFieldSubmit.addClass( 'is-visible' ); + $addCustomFieldButton.attr( 'aria-expanded', 'true' ); + + if ( false !== shouldFocus ) { + ( $metaKeySelect.is( ':visible' ) ? $metaKeySelect : $metaKeyInput ).trigger( 'focus' ); + } + }; + + hideNewMeta = function( shouldFocus ) { + clearNewMeta(); + $newMeta.removeClass( 'is-visible' ).hide(); + $addCustomFieldHeading.removeClass( 'is-visible' ); + $addCustomFieldSubmit.removeClass( 'is-visible' ); + $addCustomFieldButton.attr( 'aria-expanded', 'false' ); + + if ( false !== shouldFocus ) { + $addCustomFieldButton.trigger( 'focus' ); + } + }; + + $addCustomFieldButton.on( 'click', function( event ) { + event.preventDefault(); + showNewMeta(); + } ); + + $enterNewMetaButton.on( 'click', function( event ) { + event.preventDefault(); + + if ( $metaKeyInput.hasClass( 'hidden' ) ) { + showMetaKeyInput(); + } else { + resetMetaKeyInput(); + $metaKeySelect.trigger( 'focus' ); + } + } ); + + $cancelNewMetaButton.on( 'click', function( event ) { + event.preventDefault(); + hideNewMeta(); + } ); + + $customFieldsNotice.on( 'click', '.notice-dismiss', function() { + $customFieldsNotice.addClass( 'hidden' ); + } ); + + if ( $listTable.hasClass( 'is-empty' ) ) { + showNewMeta( false ); + } + + $postCustom.find( '#the-list' ).wpList( { + addColor: 'none', + delColor: 'none', /** * Add current post_ID to request to fetch custom fields * @@ -700,7 +819,7 @@ jQuery( function($) { * @return {Object} Data modified with post_ID attached. */ addBefore: function( s ) { - s.data += '&post_id=' + $('#post_ID').val(); + s.data += '&post_id=' + $( '#post_ID' ).val(); return s; }, /** @@ -708,8 +827,31 @@ jQuery( function($) { * * @ignore */ - addAfter: function() { - $('table#list-table').show(); + addAfter: function( returnedResponse, settings ) { + var message = 'newmeta' === settings.element ? __( 'Custom field added.' ) : __( 'Custom field updated.' ); + + if ( true === settings.parsed || ! settings.parsed || settings.parsed.errors ) { + return; + } + + $listTable.removeClass( 'is-empty' ).addClass( 'has-fields' ).show(); + showCustomFieldsNotice( message ); + + if ( 'newmeta' === settings.element ) { + hideNewMeta(); + } + }, + delAfter: function( returnedResponse, settings ) { + if ( ! settings.parsed || settings.parsed.errors ) { + return; + } + + $postCustom.find( '#' + settings.element ).remove(); + showCustomFieldsNotice( __( 'Custom field deleted.' ) ); + + if ( ! $postCustom.find( '#the-list tr.is-saved' ).length ) { + $listTable.removeClass( 'has-fields' ).addClass( 'is-empty' ).hide(); + } } }); } diff --git a/src/wp-admin/css/edit.css b/src/wp-admin/css/edit.css index f1dd76ac31474..c264ef4e8f51e 100644 --- a/src/wp-admin/css/edit.css +++ b/src/wp-admin/css/edit.css @@ -1085,82 +1085,222 @@ form#tags-filter { 11.1 - Custom Fields ------------------------------------------------------------------------------*/ +#postcustom .inside { + margin-top: 0; + padding: 12px; +} + +.block-editor-page .edit-post-meta-boxes-area #postcustom .inside { + padding-right: 24px; + padding-left: 24px; +} + #postcustomstuff thead th { padding: 5px 8px 8px; background-color: #f0f0f1; } -#postcustom #postcustomstuff .submit { - border: 0 none; - float: none; - padding: 0 8px 8px; +#postcustomstuff table { + margin: 0; + width: 100%; + border: 1px solid #dcdcde; + border-spacing: 0; + background-color: #f6f7f7; } -#postcustom #postcustomstuff .add-custom-field { - padding: 12px 8px 8px; +#postcustomstuff tr { + vertical-align: top; } -#side-sortables #postcustom #postcustomstuff .submit { - margin: 0; +#postcustomstuff #list-table, +#postcustomstuff #newmeta { + border: 0; + border-spacing: 0; + background: transparent; +} + +#postcustomstuff #list-table tbody, +#postcustomstuff #newmeta tbody { + display: block; +} + +#postcustomstuff #list-table thead, +#postcustomstuff #newmeta thead { + display: none; +} + +#postcustomstuff .custom-field-add-heading { + margin: 0 0 8px; +} + +.js #postcustomstuff .custom-field-add-heading { + display: none; +} + +.js #postcustomstuff .custom-field-add-heading.is-visible { + display: block; +} + +#postcustomstuff #list-table.has-fields ~ .custom-field-add-heading.is-visible { + padding-top: 16px; + border-top: 1px solid #dcdcde; +} + +#postcustomstuff .custom-field-row, +#postcustomstuff #newmeta tbody tr { + display: grid; + gap: 8px 12px; padding: 0; + border-bottom: 1px solid #dcdcde; + background: transparent; } -#side-sortables #postcustom #postcustomstuff #the-list textarea { - height: 85px; +#postcustomstuff .custom-field-row { + grid-template-columns: minmax(160px, 24%) minmax(0, 1fr) auto; } -#side-sortables #postcustom #postcustomstuff td.left input, -#side-sortables #postcustom #postcustomstuff td.left select, -#side-sortables #postcustomstuff #newmetaleft a { - margin: 3px 3px 0; +#postcustomstuff #newmeta tbody tr { + grid-template-columns: minmax(160px, 24%) minmax(0, 1fr) auto; } -#postcustomstuff table { +#postcustomstuff .custom-field-row.is-saved { + padding: 0 0 16px; + border-bottom: 0; +} + +#postcustom .custom-fields-notice { + margin: 0 0 12px; +} + +#postcustom .custom-fields-notice p { + margin: 0.5em 0; +} + +#postcustomstuff #newmeta { + border-bottom: 0; +} + +#postcustomstuff #newmeta tbody tr { + border-bottom: 0; +} + +#postcustomstuff #list-table.has-fields ~ #newmeta.is-visible tbody tr { + padding-top: 0; +} + +.js #postcustomstuff #newmeta { + display: none; +} + +.js #postcustomstuff #newmeta.is-visible { + display: table; +} + +#postcustomstuff .custom-field-row td, +#postcustomstuff #newmeta td { + display: block; + padding: 0; +} + +#postcustomstuff .custom-field-label { + display: block; margin: 0; - width: 100%; - border: 1px solid #dcdcde; - border-spacing: 0; - background-color: #f6f7f7; + padding: 2px 0; } -#postcustomstuff tr { - vertical-align: top; +#postcustomstuff .custom-field-key, +#postcustomstuff .custom-field-value-field { + display: block; + box-sizing: border-box; + width: 100%; + max-width: none; + margin: 0; } -#postcustomstuff table input, -#postcustomstuff table select, -#postcustomstuff table textarea { - width: 96%; - margin: 8px; +#postcustomstuff .custom-field-value-field { + min-height: 40px; } -#side-sortables #postcustomstuff table input, -#side-sortables #postcustomstuff table select, -#side-sortables #postcustomstuff table textarea { - margin: 3px; +#postcustomstuff .custom-field-key.hidden { + display: none; } #postcustomstuff th.left, #postcustomstuff td.left { - width: 38%; + width: auto; +} + +#postcustomstuff .custom-field-actions, +#postcustom #postcustomstuff .submit { + margin: 8px 0 0; + padding: 0; + border: 0; + float: none; +} + +#postcustom #postcustomstuff .custom-field-row .custom-field-actions { + display: flex; + gap: 16px; + align-items: center; + align-self: start; + justify-content: flex-end; + margin: 0; + padding-top: 22px; + padding-right: 4px; + white-space: nowrap; } -#postcustomstuff .submit input { +#postcustomstuff .custom-field-actions button, +#postcustomstuff .custom-field-actions input { margin: 0; width: auto; } -#postcustomstuff #newmetaleft a, -#postcustomstuff #newmeta-button { +#postcustomstuff .custom-field-enter-new { display: inline-block; - margin: 0 8px 8px; - text-decoration: none; + margin-top: 8px; +} + +#postcustomstuff .custom-field-enter-new.hidden { + display: none; +} + +#postcustom #postcustomstuff .add-custom-field { + display: flex; +} + +.js #postcustom #postcustomstuff .add-custom-field { + display: none; +} + +.js #postcustom #postcustomstuff .add-custom-field.is-visible { + display: flex; +} + +#postcustomstuff .custom-field-add-toggle { + margin: 0; +} + +.js #postcustomstuff .custom-field-add-toggle[aria-expanded="true"] { + display: none; } .no-js #postcustomstuff #enternew { display: none; } +#side-sortables #postcustomstuff .custom-field-row, +#side-sortables #postcustomstuff #newmeta tbody tr { + grid-template-columns: 1fr; +} + +@media screen and (max-width: 782px) { + #postcustomstuff .custom-field-row, + #postcustomstuff #newmeta tbody tr { + grid-template-columns: 1fr; + } +} + #post-body-content .compat-attachment-fields { margin-bottom: 20px; } diff --git a/src/wp-admin/includes/meta-boxes.php b/src/wp-admin/includes/meta-boxes.php index 535a00cd3fe94..35206a7f3a236 100644 --- a/src/wp-admin/includes/meta-boxes.php +++ b/src/wp-admin/includes/meta-boxes.php @@ -812,6 +812,12 @@ function post_trackback_meta_box( $post ) { */ function post_custom_meta_box( $post ) { ?> +