Add lock icon styling for non-editable theme templates by harshbhonsle · Pull Request #72900 · WordPress/gutenberg

harshbhonsle · 2025-11-01T08:12:15Z

What?

Adds a lock icon to non-editable theme templates in the Site Editor, along with a tooltip to clarify that these templates cannot be edited directly.

Why?

In WordPress 6.9, the template management flow requires users to duplicate a theme template before editing. This change from previous behavior (where templates could be edited directly) may confuse users. Adding a lock icon helps visually distinguish non-editable templates and aligns with the styling used for pattern templates.

How?

Modified packages/edit-site/src/components/page-templates/index.js to conditionally render a lock icon for non-editable templates.
Updated packages/edit-site/src/components/page-templates/style.scss to style the lock icon and tooltip.
Tooltip text: “This template cannot be edited.”

Testing Instructions

Go to the WordPress dashboard.
Navigate to Appearance > Editor.
Click on "Templates" in the sidebar.
Observe that non-editable templates display a lock icon.
Hover over the icon to see the tooltip: “This template cannot be edited.”

Testing Instructions for Keyboard

Confirm that the lock icon is accessible and the tooltip appears on focus or hover.

Screenshots or screencast

|Before|

|After|

github-actions · 2025-11-01T08:12:26Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: harshbhonsle <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: nendeb <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

harshbhonsle · 2025-11-03T12:45:35Z

Thanks for adding the labels, @t-hamano.
Could you please review this when you have a moment, or add someone from the Templates API team who’s responsible for this area?

t-hamano

Thanks for the PR!

Perhaps it would be easier to just mimic the implementation of patternTitleField? That is,

Create packages/fields/src/fields/template-title/view.tsx file and implement the same functionality as the PatternTitleView component.
Assign that title view to the render property here.

harshbhonsle · 2025-11-07T19:18:03Z

Hi @t-hamano,

I’ve implemented the TemplateTitleView and integrated it with the template field as suggested.

Specifically:

Created packages/fields/src/fields/template-title/view.tsx to render the template title along with the lock icon for non-editable templates.
Updated templateTitleField (packages/fields/src/fields/template-title/index.ts) to assign TemplateTitleView to the render property. This ensures the title field now displays the lock icon for non-editable theme templates.
The lock icon includes a tooltip: “This template cannot be edited,” consistent with the design for pattern templates.

This aligns the template title field behavior with the pattern title implementation while providing a clear visual cue for non-editable templates.
Let me know if you have any feedback or if further adjustments are needed!

t-hamano · 2025-11-10T06:15:08Z

packages/edit-site/src/components/page-templates/index.js

 	} );
 	const dateField = postTypeFields.find( ( field ) => field.id === 'date' );
 	const themeField = useThemeField();
 	const fields = useMemo( () => {


No changes are needed to this file.

Ok, I will remove the comments and revert the file back to the original code.

t-hamano · 2025-11-10T06:18:46Z

packages/fields/src/fields/template-title/view.tsx

+	const isLocked = !item.is_custom;
+
+	return (
+		<div className="page-template-title-wrapper">


Why is the layout and structure here different from the pattern title view?

I added a <div> and <span> to position the lock next to the kebab menu. Without them, it appears next to the title. I can remove them if you want.

… fix lock icon

t-hamano

@harshbhonsle, can you revert the changes to these files? We don't need to change these files.

packages/edit-site/src/components/page-templates/index.js
packages/edit-site/src/components/page-templates/style.scss
package-lock.json
package.json

t-hamano · 2025-11-14T06:37:13Z

packages/fields/src/fields/template-title/view.tsx

+	const isLocked = ! item.is_custom;
+
+	return (
+		<BaseTitleView item={ item }>


Suggested change

<BaseTitleView item={ item }>

<BaseTitleView item={ item } className="fields-field__template-title">

Then, create a packages/fields/src/fields/template-title/style.scss file and write the following style:

.fields-field__template-title span:first-child { flex: 1; }

Reverted unnecessary changes to page-templates files and added className with corresponding style for template-title field as suggested.
@t-hamano

t-hamano · 2025-11-17T01:33:26Z

@harshbhonsle, There are still two unexpected changes.

package.json
package-lock.json

Please see the Files changed tab to see what files are actually changed.

@ellatrix @WordPress/gutenberg-design, We're trying to add lock icons to built-in (theme-provided) templates, but what do you think?

jasmussen · 2025-11-17T08:33:48Z

Thanks for the ping. In short, lock icon for files that can't be edited seems fine.

There are some aspects to the feature itself that I'd love to revisit. When I went deep on it recently, there were some aspects of it I could see improved, and I'd love to work with folks in the 7.0 phase to improve this. Some of the flow issues I encountered were related to editing a newly created, but not activated, template, then clicking the site logo to back, and being on the "Active templates" section. While I really need to go more deep on the mechanisms, a loose hunch is that splitting active away from created might not be necessary. Whether that leaves room for lock icons is not fully clear to me yet.

harshbhonsle · 2025-11-17T18:23:39Z

@t-hamano, I tried to revert the unintended changes in package.json and package-lock.json by matching them to trunk. I ran git fetch upstream and git checkout upstream/trunk -- to revert the files. It’s possible that new dependencies were added to trunk, which is why package.json and package-lock.json are still showing changes.

ellatrix · 2025-11-17T18:57:21Z

Let's please wait with any further changes to template activation. It was reverted for 6.9 and will be put behind an experiment first in #73252. The current UI won't stay.

t-hamano added [Type] Enhancement A suggestion for improvement. [Feature] Templates API Related to API powering block template functionality in the Site Editor labels Nov 3, 2025

t-hamano reviewed Nov 3, 2025

View reviewed changes

t-hamano reviewed Nov 10, 2025

View reviewed changes

harshbhonsle added 2 commits November 11, 2025 21:40

Add lock icon styling for non-editable theme templates

c248ced

Add template-title view and update page-templates lock icon

1b36efa

harshbhonsle force-pushed the add/lock-icon-template-management branch from 2b20c99 to 1b36efa Compare November 11, 2025 16:14

Refactor template-title view.tsx to match pattern title structure and…

f52bbdb

… fix lock icon

harshbhonsle requested a review from t-hamano November 13, 2025 13:37

t-hamano reviewed Nov 14, 2025

View reviewed changes

Add lock icon to template-title field and revert unintended changes

6d88599

t-hamano added the [Status] Blocked Used to indicate that a current effort isn't able to move forward label Nov 18, 2025

	<BaseTitleView item={ item }>
	<BaseTitleView item={ item } className="fields-field__template-title">

Conversation

harshbhonsle commented Nov 1, 2025

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

Uh oh!

github-actions bot commented Nov 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

harshbhonsle commented Nov 3, 2025

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

harshbhonsle commented Nov 7, 2025

Uh oh!

t-hamano Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

harshbhonsle Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

t-hamano Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

harshbhonsle Nov 10, 2025

Choose a reason for hiding this comment

Uh oh!

t-hamano left a comment

Choose a reason for hiding this comment

Uh oh!

t-hamano Nov 14, 2025

Choose a reason for hiding this comment

Uh oh!

harshbhonsle Nov 16, 2025

Choose a reason for hiding this comment

Uh oh!

t-hamano commented Nov 17, 2025

Uh oh!

jasmussen commented Nov 17, 2025

Uh oh!

harshbhonsle commented Nov 17, 2025

Uh oh!

ellatrix commented Nov 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Nov 1, 2025 •

edited

Loading