Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image: Fix design of close button for the lightbox #51205

Conversation

artemiomorales
Copy link
Contributor

What?

This PR changes the design of the close button in the lightbox so that it is easily visible at all times.

Why?

Fixes #51126, wherein the close button was appearing on top of images and was hard to see in cases where the image was dark.

How?

It rebases on top of #51164 to make use of those fixes that ensures images display properly.

It uses this design and sets the close button color to be the theme contrast color, adds padding, and makes the close button smaller.

Testing Instructions

  1. Ensure the Interactivity API and Behaviors UI setting is enabled in Gutenberg > Experim1.ents in the admin.
  2. Create a new post and insert a vertically oriented image as well as a horizontally oriented one.
  3. Activate the image lightboxes via Advanced > Behaviors > Lightbox in block settings.
  4. Publish and view the post.
  5. Click on the images; see that the image is fully visible and contained within the lightbox; the close button should be clearly visible and unobscured by the image.
  6. Change the theme background color and contrast color. (Note: Manually setting these colors individually will not work, I believe due to this issue, but you can experiment with changing theme styles.)
  7. Test again to ensure that the colors are applied as expected.

Testing Instructions for Keyboard

  • When viewing the post, tab to the image instead and press Enter or Space to open the lightbox.
  • See that the close button and focus are visible.

artemiomorales and others added 27 commits June 1, 2023 18:01
The lightbox will now load the original image when opened;
the src attribute is set dynamically so it will not be
unnecessarily loaded by the browser.

In addition, removed the padding and hid the caption.
Ensures local font asset file URLs also work in iframes.
…dants (WordPress#51079)

* Add inert attribute to disabled blocks that have only disabled descendants

* Fix typo

---------

Co-authored-by: ramon <[email protected]>
…dPress#51148)

- Prevent DefaultAppender from appearing in a disabled block.
- Disable selection (using user-select: none) in disabled blocks.
- Prevent blocks from being inserted into a disabled block via global inserter.
- Prevent disabled blocks from being removed via keyboard shortcut.
- Prevent disabled blocks from being moved via List View drag and drop.
- Prevent block overlay from appearing on a disabled block.
…ly' (WordPress#51185)

Change the behaviour of getBlockEditingMode() so that a block's children
is considered "content" that is editable when the editing mode is
'contentOnly'. Therefore getBlockEditingMode( foo ) should be 'default'
when getBlockEditingMode( getParent( foo ) ) is 'contentOnly'.

The benefit of this is that block subtrees can be enabled by simply
setting the parent container to 'contentOnly' rather than each
individual block to 'default'. This is much more performant as each call
to setBlockEditingMode() invalidates the cache.
* Add static column number option

* Address feedback and fix Group placeholder

* Revert non-responsive option

* Try using grid layout in Post Template

* Update Post Template to use auto-fill columns

* Add block spacing to post template

* Show gap control by default

* Add unstable columns grid property

* Rename layout column attribute.

* Add a media query to reproduce current responsiveness

* Move layout controls to Post Template block

* Reduce max columns to 6.

* Remove unstable prefix

* fix cols breaking out of container

* Try adding deprecation

* Fix broken loop

* Update fixtures

* Code improvements

* Add some comments to the CSS.

* Add back deleted line

* Remove legacy attributes in deprecation

* Fix deprecation logic

* Update fixtures

* Fallback gap for classic themes

* fix spacing

* match old default value

* Update PHP test strings.

* Fix tag discrepancy in fixtures
Block Supports: Disable block supports when Editing Mode is not default

Co-authored-by: Alex Lende <[email protected]>
Co-authored-by: Alex Lende <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>
…page's template (WordPress#50857)

* Add ability to prevent editing blocks using useBlockEditingMode()

* Make useBlockEditingMode use context

* Remove rootBlockEditingMode setting

* Fix private createRegistrySelector selectors

* Consolidate templateLock=contentOnly logic into getBlockEditingMode

* Hide disabled blocks from List View

* Hide disabled blocks from breadcrumbs

* Add doc comments

* Add unit tests

* Use @typedef to document mode param

* Restore packages/components/package.json from trunk

* Restore packages/block-library/src/post-title/edit.js from trunk

* Move BlockListBlockContext out of block.js so that it exists on mobile platforms

* Site Editor: Add ability to focus on editing a page's content vs the page's template

* Show page information in DocumentActions

* Implement Content panel

* Prevent block overlay on disabled blocks

* Fix Navigation block being selectable

* Show 'Page' in breadcrumbs when focused on editing page

* Update post title, post featured image, and post content blocks to say 'Page' instead of 'Post'

* toolbar title styling

* Remove removePostFromContentBlockLabels for now

* Fix being able to select text within disabled blocks

* Hide BlockAppender when block is disabled

* Fix comments block in non-post templates

* Update template card selector in E2E tests

* Fix 'Add submenu' button in Navigation block

* Remove unhelpful comments

* Remove more unnecessary comments

* Use constant for block types array

* Use BEMish selectors

* Be explicit that we're switching away from the page lock

* Update removePageFromBlockContext() test

* Fix post context from appearing in Edit Template preview

We have to set postId and postType to null for the preview and omit them
in the editor. No point having helper methods, therefore.

* Clear block selection when switching from template focus to page focus

* Prevent insertion into a disabled block

* Don't allow removing and moving children of disabled blocks

* Work around @wordpress/data bug by not using createRegistrySelector() for now

* Fix typo

* Fix select() mock

* Fix block-editor selector tests

* Revert block-editor changes

* Improve useDisableNonContentBlocks performance

* Fix performance tests

---------

Co-authored-by: Saxon Fletcher <[email protected]>
Co-authored-by: ramon <[email protected]>
* Release script: Update react-native-editor version to 1.96.0

* Release script: Update with changes from 'npm run core preios'

* Update CHANGELOG for 1.96.0

* Release script: Update react-native-editor version to 1.96.1

* Release script: Update with changes from 'npm run core preios'

* [RNMobile] Fix Android-only issue related to block toolbar not being displayed on some blocks in UBE (WordPress#51131)

* Query editor element only in the function is needed

We experienced on Android that the `editor` variable might be already defined in some cases when loading UBE's behavior overrides.

* Update `react-native-editor` changelog

* Update Changelog

* Update Podfile.lock

---------

Co-authored-by: Derek Blank <[email protected]>
Co-authored-by: Carlos Garcia <[email protected]>
…ress#51162)

* Scripts: Optimize updating render paths when developing blocks

* Add CHANGELOG entry to `@wordpress/scripts`

* Update CHANGELOG.md
@artemiomorales
Copy link
Contributor Author

Set the wrong target branch in the wrong repo — sorry about that, will close.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Image: Close button in the lightbox hard to see with dark images