Skip to content

Omit "design" controls from Image block toolbar while in write mode#66880

Closed
up1512001 wants to merge 8 commits intoWordPress:trunkfrom
up1512001:gh/66875
Closed

Omit "design" controls from Image block toolbar while in write mode#66880
up1512001 wants to merge 8 commits intoWordPress:trunkfrom
up1512001:gh/66875

Conversation

@up1512001
Copy link
Copy Markdown
Member

What?

Based on editor mode updating image block toolbar controls.

Why?

closes #66875

How?

  • conditional rendering block toolbar based on editor mode.

Testing Instructions

  1. open editor and insert image block.
  2. change editor mode and observer image toolbar controls will change based on editor mode.

Screenshots or screencast

Screen.Recording.2024-11-08.at.22.59.27.mov

@up1512001 up1512001 added [Type] Bug An existing feature does not function as intended [Block] Image Affects the Image Block labels Nov 8, 2024
@up1512001 up1512001 requested a review from richtabor November 8, 2024 17:30
@up1512001 up1512001 self-assigned this Nov 8, 2024
@github-actions
Copy link
Copy Markdown

github-actions bot commented Nov 8, 2024

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: up1512001 <up1512001@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>

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

Comment on lines +735 to +750
<ImageURLInputUI
url={ href || '' }
onChangeUrl={ onSetHref }
linkDestination={ linkDestination }
mediaUrl={
( image && image.source_url ) || url
}
mediaLink={ image && image.link }
linkTarget={ linkTarget }
linkClass={ linkClass }
rel={ rel }
showLightboxSetting={ showLightboxSetting }
lightboxEnabled={ lightboxChecked }
onSetLightbox={ onSetLightbox }
resetLightbox={ resetLightbox }
/>
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think the option to link an image should still be present in Write (or content only) mode.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@talldan address your feedback.

@youknowriad
Copy link
Copy Markdown
Contributor

Similar to the other PR. Is there a way to solve this without having the knowledge of the block editing mode within the block itself? (See question here #65699 (comment) and reply)

@ramonjd
Copy link
Copy Markdown
Member

ramonjd commented Nov 15, 2024

Is there a way to solve this without having the knowledge of the block editing mode within the block itself?

So rather passed to the block somehow?

Block editing mode has been used in the image block since its creation, and in the meantime is used in more places than just navigation and image:

grep -rl 'useBlockEditingMode()' ./packages/block-library/src
./packages/block-library/src/paragraph/edit.js
./packages/block-library/src/heading/edit.js
./packages/block-library/src/navigation/edit/index.js
./packages/block-library/src/template-part/edit/inner-blocks.js
./packages/block-library/src/image/edit.js
./packages/block-library/src/button/edit.js
./packages/block-library/src/post-featured-image/edit.js
./packages/block-library/src/media-text/edit.js
./packages/block-library/src/post-title/edit.js
./packages/block-library/src/cover/edit/index.js

And there are three states: 'disabled', 'contentOnly', and 'default' so blocks might need to behave differently according to the value.

What if it were passed down through useBlockProps?

diff --git a/packages/block-editor/src/components/block-list/use-block-props/index.js b/packages/block-editor/src/components/block-list/use-block-props/index.js
index 25b9a21f0d..b30d9889e5 100644
--- a/packages/block-editor/src/components/block-list/use-block-props/index.js
+++ b/packages/block-editor/src/components/block-list/use-block-props/index.js
@@ -161,6 +161,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-block': clientId,
 		'data-type': name,
 		'data-title': blockTitle,
+		'data-editing-mode': blockEditingMode,
 		inert: isSubtreeDisabled ? 'true' : undefined,
 		className: clsx(
 			'block-editor-block-list__block',

It's a good discussion to have! Is it a blocker for this PR though?

If a better way to communicate block editing mode to blocks comes along, migrating affected blocks in the block library will have to be done anyway.

@youknowriad
Copy link
Copy Markdown
Contributor

You're right, it doesn't seem like a blocker for the current PR.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
@up1512001
Copy link
Copy Markdown
Member Author

@t-hamano addressed your feedback, please check now.

@up1512001 up1512001 requested a review from t-hamano November 15, 2024 16:44
@up1512001 up1512001 added [Type] Enhancement A suggestion for improvement. and removed [Type] Bug An existing feature does not function as intended labels Nov 15, 2024
@up1512001 up1512001 requested a review from t-hamano December 27, 2024 11:40
@richtabor
Copy link
Copy Markdown
Member

I'm not sure when it happened, but I noted that this has been resolved. #66875 (comment)

@richtabor richtabor closed this Jul 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Image Affects the Image Block [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Image block should not have the "Add text over image" control when in Write mode

6 participants