<!-- Generated by SpecStory, Markdown v2.1.0 -->

<!-- cursor Session 4c7d2fda-00ef-4a95-84f4-b41390990540 (2025-10-31 16:16Z) -->

# Make placeholder visible at all times (2025-10-31 16:16Z)

_**User (2025-10-31 14:54Z)**_

@edit.js We added a placeholder= to this block with instructions, but they are not visible unless the block is selected. is there anyway to better identify this block when it is not selected? I'd love for that placeholder to be visible all the time if possible.

---

_**Agent (model default, mode Agent)**_



---

Checking how other blocks handle this and reviewing WordPress block patterns to show a placeholder when the block is not selected.


---

<tool-use data-tool-type="read" data-tool-name="read_file">
<details><summary>Tool use: **read_file** • Read file: /Users/Prytania/Dropbox/WordPress/Inventory Presser/plugins/inventory-presser/src/blocks/description/edit.js</summary>

</details>
</tool-use>

---

<tool-use data-tool-type="search" data-tool-name="codebase_search">
<details>
                <summary>Tool use: **codebase_search** • Searched codebase "How do blocks show placeholder text when not selected in the editor?" • **15** results</summary>
            
| File | Lines |
|------|-------|
| `src/blocks/description/edit.js` | L48 |
| `src/blocks/model/edit.js` | L32 |
| `src/blocks/make/edit.js` | L32 |
| `src/blocks/color/edit.js` | L32 |
| `src/blocks/beam/edit.js` | L32 |
| `src/blocks/engine/edit.js` | L32 |
| `src/blocks/last-modified/edit.js` | L32 |
| `src/blocks/body-style/edit.js` | L32 |
| `src/blocks/interior-color/edit.js` | L32 |
| `src/blocks/vin/edit.js` | L32 |
| `src/blocks/title-status/edit.js` | L32 |
| `src/blocks/stock-number/edit.js` | L32 |
| `src/blocks/year-make-model-and-trim/edit.js` | L50 |
| `src/blocks/length/edit.js` | L32 |
| `src/blocks/trim/edit.js` | L32 |

</details>
</tool-use>

---

<tool-use data-tool-type="search" data-tool-name="grep">
<details>
<summary>Tool use: **grep** • Grep for "placeholder.*RichText|RichText.*placeholder" in "src/blocks" • 0 matches</summary>

Output mode: content


_No matches found_

</details>
</tool-use>

---



---

Checking how RichText behaves when empty to show a placeholder when not selected:


---

<tool-use data-tool-type="generic" data-tool-name="list_dir">
<details>
            <summary>Tool use: **list_dir** • Listed directory, 0 results</summary>
        
No results found
</details>
</tool-use>

---



---

Updating the block to show a placeholder when not selected and empty. RichText doesn't show placeholders when not selected, so we'll render a placeholder element in that case:


---

<tool-use data-tool-type="write" data-tool-name="search_replace">

<details><summary>Tool use: **search_replace** • Edit file: /Users/Prytania/Dropbox/WordPress/Inventory Presser/plugins/inventory-presser/src/blocks/description/edit.js</summary>

**Chunk 1**
Lines added: 2, lines removed: undefined

```diff
@@ -19,4 +19,6 @@
  	const [ meta, setMeta ] = useEntityProp( 'postType', postType, 'meta' );
  	const blockProps = useBlockProps();
+ 	const descriptionValue = meta[ invp_blocks.meta_prefix + 'description' ] || '';
+ 	const isEmpty = ! descriptionValue || descriptionValue.trim() === '';
  
  	/**
```

**Chunk 2**
Lines added: 11, lines removed: 2

```diff
@@ -26,8 +28,17 @@
  	 */
  	if ( ! isSelected ) {
- 		// Do not show the input field when the block is not selected.
+ 		// Show placeholder when empty, otherwise show the content
+ 		if ( isEmpty ) {
+ 			return (
+ 				&lt;div { ...blockProps }&gt;
+ 					&lt;p style={ { opacity: 0.62, fontStyle: 'italic' } }&gt;
+ 						{ __( 'Enter vehicle description...', 'inventory-presser' ) }
+ 					&lt;/p&gt;
+ 				&lt;/div&gt;
+ 			);
+ 		}
  		return (
  			&lt;&gt;
- 				&lt;RichText { ...blockProps } value={ meta[ invp_blocks.meta_prefix + 'description' ] }&gt;&lt;/RichText&gt;
+ 				&lt;RichText { ...blockProps } value={ descriptionValue }&gt;&lt;/RichText&gt;
  			&lt;/&gt;
  		);
```

</details>

</tool-use>

---

<tool-use data-tool-type="write" data-tool-name="search_replace">

<details><summary>Tool use: **search_replace** • Edit file: /Users/Prytania/Dropbox/WordPress/Inventory Presser/plugins/inventory-presser/src/blocks/description/edit.js</summary>

**Chunk 1**
Lines added: 1, lines removed: 1

```diff
@@ -53,5 +53,5 @@
  				onChange={ ( newValue ) =&gt; { setMeta( { ...meta, [invp_blocks.meta_prefix + 'description']: newValue } ); } }
  				allowedFormats={ [ 'core/bold', 'core/italic', 'core/link', 'core/text-color' ] }
- 				value={ meta[ invp_blocks.meta_prefix + 'description' ] }
+ 				value={ descriptionValue }
  				placeholder={ __( 'Enter vehicle description...', 'inventory-presser' ) }
  			&gt;&lt;/RichText&gt;
```

</details>

</tool-use>

---



---

Checking for linting errors:


---

<tool-use data-tool-type="generic" data-tool-name="read_lints">
<details>
          <summary>Tool use: **read_lints** • Read lints for 1 file</summary>
      
Lint paths:

- `src/blocks/description/edit.js`

Lint results

Lint errors for `src/blocks/description/edit.js`


| Message | Range | Severity |
|-------|-------|----------|
| 'useSelect' is declared but its value is never read. | 6:1-6:45 | DIAGNOSTIC_SEVERITY_HINT |


</details>
</tool-use>

---

<tool-use data-tool-type="read" data-tool-name="read_file">
<details><summary>Tool use: **read_file** • Read file: /Users/Prytania/Dropbox/WordPress/Inventory Presser/plugins/inventory-presser/src/blocks/description/edit.js</summary>

</details>
</tool-use>

---



---

Updated the block to show a placeholder when it's not selected and empty.

Changes:
1. **Extracted the description value** into a `descriptionValue` variable for reuse
2. **Added an `isEmpty` check** to detect when the description is empty or just whitespace
3. **When not selected and empty**, it displays a styled placeholder paragraph with italic text and reduced opacity
4. **When not selected but has content**, it displays the RichText as before
5. **When selected**, it continues to show the RichText with the placeholder (original behavior)

The placeholder ("Enter vehicle description...") is now visible when the block is not selected and empty, making the block easier to identify. The placeholder uses 62% opacity and italic styling to distinguish it from actual content.

After you rebuild the block assets, the placeholder will appear when the description field is empty, whether the block is selected or not.

---

