@wordpress/fields 0.6.0 → 0.7.0

package/src/components/create-template-part-modal/style.scss

@@ -3,61 +3,86 @@
 }
 
 .fields-create-template-part-modal__area-radio-group {
-	width: 100%;
-	border: $border-width solid $gray-700;
+	border: $border-width solid $gray-600;
 	border-radius: $radius-small;
+}
+
+.fields-create-template-part-modal__area-radio-wrapper {
+	position: relative;
+	padding: $grid-unit-15;
+
+	display: grid;
+	align-items: center;
+	grid-template-columns: min-content 1fr min-content;
+	grid-gap: $grid-unit-05 $grid-unit-10;
+
+	color: $gray-900;
+
+	& + & {
+		border-top: $border-width solid $gray-600;
+	}
+
+	input[type="radio"] {
+		position: absolute;
+		opacity: 0;
+	}
+
+	&:has(input[type="radio"]:checked) {
+		// This is needed to make sure that the focus ring always renders on top
+		// of the sibling radio "wrapper"'s borders.
+		z-index: 1;
+	}
+
+	&:has(input[type="radio"]:not(:checked)):hover {
+		color: var(--wp-admin-theme-color);
+	}
+
+	// Pass-through pointer events, so that the corresponding radio input
+	// gets checked when clicking on the underlying label
+	> *:not(.fields-create-template-part-modal__area-radio-label) {
+		pointer-events: none;
+	}
+}
+
+.fields-create-template-part-modal__area-radio-label {
+	// Capture pointer clicks for the whole radio wrapper
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0;
+	}
+
+	input[type="radio"]:not(:checked) ~ &::before {
+		cursor: pointer;
+	}
+
+	input[type="radio"]:focus-visible ~ &::before {
+		outline: 4px solid transparent;
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+}
+
+.fields-create-template-part-modal__area-radio-icon,
+.fields-create-template-part-modal__area-radio-checkmark {
+	fill: currentColor;
+}
+
+.fields-create-template-part-modal__area-radio-checkmark {
+	input[type="radio"]:not(:checked) ~ & {
+		opacity: 0;
+	}
+}
+
+.fields-create-template-part-modal__area-radio-description {
+	grid-column: 2 / 3;
+	margin: 0;
+
+	color: $gray-700;
+	font-size: $helptext-font-size;
+	line-height: normal;
+	text-wrap: pretty;
 
-	.components-button.fields-create-template-part-modal__area-radio {
-		display: block;
-		width: 100%;
-		height: 100%;
-		text-align: left;
-		padding: $grid-unit-15;
-
-		&,
-		&.is-secondary:hover,
-		&.is-primary:hover {
-			margin: 0;
-			background-color: inherit;
-			border-bottom: $border-width solid $gray-700;
-			border-radius: 0;
-
-			&:not(:focus) {
-				box-shadow: none;
-			}
-
-			&:focus {
-				border-bottom: $border-width solid $white;
-			}
-
-			&:last-of-type {
-				border-bottom: none;
-			}
-		}
-
-		&:not(:hover),
-		&[aria-checked="true"] {
-			color: $gray-900;
-			cursor: auto;
-
-			.fields-create-template-part-modal__option-label div {
-				color: $gray-600;
-			}
-		}
-
-		.fields-create-template-part-modal__option-label {
-			padding-top: $grid-unit-05;
-			white-space: normal;
-
-			div {
-				padding-top: $grid-unit-05;
-				font-size: $helptext-font-size;
-			}
-		}
-
-		.fields-create-template-part-modal__checkbox {
-			margin-left: auto;
-			min-width: $grid-unit-30;
-		}
+	input[type="radio"]:not(:checked):hover ~ & {
+		color: inherit;
 	}
 }

package/src/fields/page-title/view.tsx

@@ -5,12 +5,15 @@ import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import type { Settings } from '@wordpress/core-data';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import type { CommonPost } from '../../types';
 import { BaseTitleView } from '../title/view';
+import { unlock } from '../../lock-unlock';
+const { Badge } = unlock( componentsPrivateApis );
 
 export default function PageTitleView( { item }: { item: CommonPost } ) {
 	const { frontPageId, postsPageId } = useSelect( ( select ) => {
@@ -27,11 +30,11 @@ export default function PageTitleView( { item }: { item: CommonPost } ) {
 	return (
 		<BaseTitleView item={ item } className="fields-field__page-title">
 			{ [ frontPageId, postsPageId ].includes( item.id as number ) && (
-				<span className="fields-field__page-title__badge">
+				<Badge>
 					{ item.id === frontPageId
 						? __( 'Homepage' )
 						: __( 'Posts Page' ) }
-				</span>
+				</Badge>
 			) }
 		</BaseTitleView>
 	);

package/src/style.scss

@@ -3,5 +3,4 @@
 @import "./fields/featured-image/style.scss";
 @import "./fields/template/style.scss";
 @import "./fields/title/style.scss";
-@import "./fields/page-title/style.scss";
 @import "./fields/pattern-title/style.scss";

package/tsconfig.json

@@ -2,8 +2,6 @@
 	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"rootDir": "src",
-		"declarationDir": "build-types",
 		"checkJs": false
 	},
 	"references": [
@@ -29,6 +27,5 @@
 		{ "path": "../url" },
 		{ "path": "../block-editor" },
 		{ "path": "../warning" }
-	],
-	"include": [ "src" ]
+	]
 }