Enhance admin media UI with dominant color support #1719

pbearne · 2024-12-03T18:36:26Z

Added inline CSS and JavaScript to display dominant colors and transparency in the WordPress admin area for attachment previews. This enhancement allows the media library to utilize dominant color and transparency data, providing visual feedback on image properties. Updated version to 1.1.2 to reflect these changes.

Summary

Fixes #

Relevant technical choices

Added inline CSS and JavaScript to display dominant colors and transparency in the WordPress admin area for attachment previews. This enhancement allows the media library to utilize dominant color and transparency data, providing visual feedback on image properties. Updated version to 1.1.2 to reflect these changes.

github-actions · 2024-12-03T18:36:40Z

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @[email protected].

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: [email protected].

Co-authored-by: pbearne <[email protected]>
Co-authored-by: westonruter <[email protected]>
Co-authored-by: joemcgill <[email protected]>
Co-authored-by: mukeshpanchal27 <[email protected]>
Co-authored-by: mxbclang <[email protected]>
Co-authored-by: felixarntz <[email protected]>
Co-authored-by: adamsilverstein <[email protected]>
Co-authored-by: estlacksensory <[email protected]>
Co-authored-by: spacedmonkey <[email protected]>

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

Update version numbers and associated comments from 1.1.2 to 1.1.3 for consistency across the plugin files. This change ensures that the codebase reflects the correct version for recent updates or bug fixes included in this release.

Corrected inconsistent indentation and spacing to improve code readability and maintainability in hooks.php. These changes ensure a cleaner code style without altering the functionality or logic.

This commit specifies return types for several functions in the dominant-color-images plugin. The `dominant_color_admin_inline_style` and `dominant_color_admin_script` functions now explicitly return void, and the `dominant_color_prepare_attachment_for_js` function now returns an array. Adding these return types improves code clarity and aligns with current PHP best practices.

@return

The @return void annotations were removed from the PHPDoc comments in two functions within the hooks.php file. These annotations were redundant, as the functions' return types are already declared with "void" in the function signatures. This cleanup enhances the readability and maintains consistency across the codebase.

Updated the function docblock type hints for arrays to use generics, enhancing code clarity and consistency. This change does not affect functionality but improves the readability and maintenance of the codebase.

joemcgill

Thanks @pbearne. This looks mostly good to go for me. Left a few suggestions

plugins/dominant-color-images/hooks.php

joemcgill · 2024-12-04T20:18:22Z

plugins/dominant-color-images/hooks.php

+	$response['hasTransparencyClass'] = '';
+	if ( isset( $meta['has_transparency'] ) ) {
+		$response['hasTransparency']      = $meta['has_transparency'];
+		$response['hasTransparencyClass'] = $meta['has_transparency'] ? 'has-transparency' : 'not-transparent';


This could be inferred on the front end and not returned as part of the response.

I belive we need this

It's fine to create the class on the server and pass it as part of the response, but just to clarify what I meant, in the script that gets output in dominant_color_admin_script(), you could do something like this (untested):

<script> (function() { var s = jQuery( '#tmpl-attachment' ) var transparencyClassName = 'true' === data.hasTransparency ? 'has-transparency' : 'not-transparent'; var n = s[0].innerText.replace( '{{ data.orientation }}"', '{{ data.orientation }} {{ transparencyClassName }}" data-dominant-color="{{ data.dominantColor }}" data-has-transparency="{{ data.hasTransparency }}" style="--dominant-color: #{{ data.dominantColor }};"') s.replaceWith( '<script type="text/html" id="tmpl-attachment">' + n ); }()); </script>

Also, it looks like only the has-transparency class is ever referenced by the custom CSS that gets added here, so if could be simplified to:

var transparencyClassName = 'true' === data.hasTransparency ? 'has-transparency' : '';

or if this remains in PHP:

$response['hasTransparencyClass'] = $meta['has_transparency'] ? 'has-transparency' : '';

made the change to use JS for the class

plugins/dominant-color-images/readme.txt

Updated the dominant color and transparency properties in hooks.php to use proper sanitization functions. This change helps prevent potential issues with unsanitized data affecting the media library display. Also, adjusted version references for an upcoming release.

plugins/dominant-color-images/load.php

plugins/dominant-color-images/readme.txt

plugins/dominant-color-images/hooks.php

Co-authored-by: Weston Ruter <[email protected]>

Reorganize the logic for assigning the transparency class name by moving it from the server-side to the client-side script. This change improves code clarity by handling conditional class name assignments directly within the client-side context, thereby simplifying the server-side response handling.

plugins/dominant-color-images/hooks.php

Co-authored-by: Weston Ruter <[email protected]>

plugins/dominant-color-images/hooks.php

Co-authored-by: Weston Ruter <[email protected]>

plugins/dominant-color-images/hooks.php

Co-authored-by: Weston Ruter <[email protected]>

plugins/dominant-color-images/hooks.php

Co-authored-by: Weston Ruter <[email protected]>

westonruter · 2024-12-13T19:24:38Z

I'm seeing the dominant color on the frontend:

<img data-dominant-color="070606" data-has-transparency="false" style="--dominant-color: #070606;" fetchpriority="high" decoding="async" width="1024" height="403" src="http://localhost:8888/wp-content/uploads/2024/12/Screenshot-2024-12-09-12.43.02-1024x403.png" alt="" class="wp-image-402 not-transparent" srcset="http://localhost:8888/wp-content/uploads/2024/12/Screenshot-2024-12-09-12.43.02-1024x403.png 1024w, http://localhost:8888/wp-content/uploads/2024/12/Screenshot-2024-12-09-12.43.02-300x118.png 300w, http://localhost:8888/wp-content/uploads/2024/12/Screenshot-2024-12-09-12.43.02-768x302.png 768w, http://localhost:8888/wp-content/uploads/2024/12/Screenshot-2024-12-09-12.43.02.png 1294w" sizes="(max-width: 1024px) 100vw, 1024px">

But on the Media screen and in the Media modal, I'm not seeing anything added:

<div class="not-transparent attachment-preview js--select-attachment type-image subtype-png landscape" data-dominant-color="" data-has-transparency="false" style="--dominant-color: #;">

Note the dominant color is missing from the underlying data. In looking at the Ajax response, I see:

{
    "id": 402,
    "title": "Screenshot 2024-12-09 12.43.02",
    "filename": "Screenshot-2024-12-09-12.43.02.png",
    "url": "http:\/\/localhost:8888\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-09-12.43.02.png",
    "link": "http:\/\/localhost:8888\/screenshot-2024-12-09-12-43-02\/",
    "alt": "",
    "author": "1",
    "description": "",
    "caption": "",
    "name": "screenshot-2024-12-09-12-43-02",
    "status": "inherit",
    "uploadedTo": 0,
    "date": 1734116876000,
    "modified": 1734116876000,
    "menuOrder": 0,
    "mime": "image\/png",
    "type": "image",
    "subtype": "png",
    "icon": "http:\/\/localhost:8888\/wp-includes\/images\/media\/default.svg",
    "dateFormatted": "December 13, 2024",
    "nonces": {
        "update": "6ec61bcfb7",
        "delete": "92edbf45a7",
        "edit": "dccdfde8bb"
    },
    "editLink": "http:\/\/localhost:8888\/wp-admin\/post.php?post=402&action=edit",
    "meta": false,
    "authorName": "admin",
    "authorLink": "http:\/\/localhost:8888\/wp-admin\/profile.php",
    "filesizeInBytes": 92142,
    "filesizeHumanReadable": "90 KB",
    "context": "",
    "height": 509,
    "width": 1294,
    "orientation": "landscape",
    "sizes": {
        "thumbnail": {
            "height": 150,
            "width": 150,
            "url": "http:\/\/localhost:8888\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-09-12.43.02-150x150.png",
            "orientation": "landscape"
        },
        "medium": {
            "height": 118,
            "width": 300,
            "url": "http:\/\/localhost:8888\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-09-12.43.02-300x118.png",
            "orientation": "landscape"
        },
        "large": {
            "height": 238,
            "width": 604,
            "url": "http:\/\/localhost:8888\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-09-12.43.02-1024x403.png",
            "orientation": "landscape"
        },
        "full": {
            "url": "http:\/\/localhost:8888\/wp-content\/uploads\/2024\/12\/Screenshot-2024-12-09-12.43.02.png",
            "height": 509,
            "width": 1294,
            "orientation": "landscape"
        }
    },
    "compat": {
        "item": "",
        "meta": ""
    },
    "dominantColor": "",
    "hasTransparency": false
}

westonruter · 2024-12-13T19:27:39Z

In looking at the underlying attachment meta, the dominant_color does not start with #"

{
    "dominant_color": "070606",
    "has_transparency": false
}

westonruter · 2024-12-13T19:55:22Z

Seems like this is now working!

Before:

Screen.recording.2024-12-13.11.52.07.webm

After:

Screen.recording.2024-12-13.11.53.06.webm

joemcgill

Looking good to me. Thanks @pbearne!

pbearne and others added 3 commits December 3, 2024 13:38

Merge branch 'trunk' into 354-media-model

d82c532

Update hooks.php

d6d96e4

pbearne linked an issue Dec 3, 2024 that may be closed by this pull request

Use dominant color as background color in media modal #354

Closed

Paul Bearne added 2 commits December 3, 2024 13:49

Fix code indentation and spacing issues

4abdda4

Corrected inconsistent indentation and spacing to improve code readability and maintainability in hooks.php. These changes ensure a cleaner code style without altering the functionality or logic.

Fix code indentation and spacing issues

892e8df

Corrected inconsistent indentation and spacing to improve code readability and maintainability in hooks.php. These changes ensure a cleaner code style without altering the functionality or logic.

pbearne added this to the dominant-color-images n.e.x.t milestone Dec 3, 2024

pbearne added the [Plugin] Image Placeholders Issues for the Image Placeholders plugin (formerly Dominant Color Images) label Dec 3, 2024

pbearne added the [Type] Enhancement A suggestion for improvement of an existing feature label Dec 3, 2024

Paul Bearne added 3 commits December 3, 2024 13:58

Refactor type hints in function docblock.

63070c1

Updated the function docblock type hints for arrays to use generics, enhancing code clarity and consistency. This change does not affect functionality but improves the readability and maintenance of the codebase.

Refactor type hints in function docblock.

03d9333

Updated the function docblock type hints for arrays to use generics, enhancing code clarity and consistency. This change does not affect functionality but improves the readability and maintenance of the codebase.

joemcgill requested changes Dec 4, 2024

View reviewed changes

pbearne requested review from joemcgill and westonruter December 4, 2024 23:40

westonruter reviewed Dec 5, 2024

View reviewed changes

plugins/dominant-color-images/load.php Outdated Show resolved Hide resolved

westonruter reviewed Dec 5, 2024

View reviewed changes

plugins/dominant-color-images/load.php Outdated Show resolved Hide resolved

westonruter reviewed Dec 5, 2024

View reviewed changes

plugins/dominant-color-images/readme.txt Outdated Show resolved Hide resolved

westonruter reviewed Dec 5, 2024

View reviewed changes

plugins/dominant-color-images/hooks.php Outdated Show resolved Hide resolved

westonruter reviewed Dec 5, 2024

View reviewed changes

plugins/dominant-color-images/hooks.php Outdated Show resolved Hide resolved

pbearne and others added 6 commits December 6, 2024 10:54

Update plugins/dominant-color-images/load.php

6cc5cfa

Co-authored-by: Weston Ruter <[email protected]>

Update plugins/dominant-color-images/load.php

1e52898

Co-authored-by: Weston Ruter <[email protected]>

Update plugins/dominant-color-images/readme.txt

6dd0272

Co-authored-by: Weston Ruter <[email protected]>

Update plugins/dominant-color-images/hooks.php

bcd40c8

Co-authored-by: Weston Ruter <[email protected]>

Update plugins/dominant-color-images/hooks.php

713532e

Co-authored-by: Weston Ruter <[email protected]>

pbearne requested a review from westonruter December 9, 2024 14:40

westonruter reviewed Dec 9, 2024

View reviewed changes

plugins/dominant-color-images/hooks.php Outdated Show resolved Hide resolved

plugins/dominant-color-images/hooks.php Outdated Show resolved Hide resolved

pbearne and others added 3 commits December 10, 2024 17:36

Update plugins/dominant-color-images/hooks.php

89c62b3

Co-authored-by: Weston Ruter <[email protected]>

Update plugins/dominant-color-images/hooks.php

9d89c44

Co-authored-by: Weston Ruter <[email protected]>

Merge branch 'trunk' into 354-media-model

9cbdfef

westonruter reviewed Dec 11, 2024

View reviewed changes

plugins/dominant-color-images/hooks.php Outdated Show resolved Hide resolved

mukeshpanchal27 reviewed Dec 11, 2024

View reviewed changes

plugins/dominant-color-images/hooks.php Outdated Show resolved Hide resolved

pbearne and others added 2 commits December 11, 2024 09:07

Update plugins/dominant-color-images/hooks.php

bafba80

Co-authored-by: Weston Ruter <[email protected]>

Update hooks.php

07c1026

westonruter reviewed Dec 12, 2024

View reviewed changes

plugins/dominant-color-images/hooks.php Outdated Show resolved Hide resolved

pbearne and others added 2 commits December 12, 2024 08:20

Update plugins/dominant-color-images/hooks.php

c58a355

Co-authored-by: Weston Ruter <[email protected]>

Merge branch 'trunk' into 354-media-model

7de9e68

westonruter reviewed Dec 12, 2024

View reviewed changes

plugins/dominant-color-images/hooks.php Outdated Show resolved Hide resolved

westonruter reviewed Dec 12, 2024

View reviewed changes

plugins/dominant-color-images/hooks.php Outdated Show resolved Hide resolved

pbearne and others added 3 commits December 12, 2024 17:27

Update plugins/dominant-color-images/hooks.php

3f96e3f

Co-authored-by: Weston Ruter <[email protected]>

Merge branch 'trunk' into 354-media-model

8c43763

Combine comments

be57225

westonruter added 3 commits December 13, 2024 11:31

Account for dominant_color not being prefixed by hash

6c3f1ae

Avoid printing --dominant-color style when there is no dominant color

e4fb28f

Fix regex for dominant_color

92553f2

Add reference to related core function

2da00d7

westonruter changed the title ~~Enhance admin UI with dominant color support.~~ Enhance admin media UI with dominant color support Dec 13, 2024

westonruter approved these changes Dec 13, 2024

View reviewed changes

joemcgill approved these changes Dec 13, 2024

View reviewed changes

joemcgill merged commit 3258112 into WordPress:trunk Dec 13, 2024
17 checks passed

mukeshpanchal27 mentioned this pull request Dec 16, 2024

Image Placeholders: Remove dominant color attributes from old media images #1747

Closed

westonruter mentioned this pull request Dec 18, 2024

Account for $meta arg in wp_prepare_attachment_for_js not being an array #1756

Merged

Enhance admin media UI with dominant color support #1719

Enhance admin media UI with dominant color support #1719

Uh oh!

Conversation

pbearne commented Dec 3, 2024

Summary

Relevant technical choices

Uh oh!

github-actions bot commented Dec 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

Uh oh!

joemcgill left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

joemcgill Dec 4, 2024

Choose a reason for hiding this comment

Uh oh!

pbearne Dec 4, 2024

Choose a reason for hiding this comment

Uh oh!

joemcgill Dec 5, 2024

Choose a reason for hiding this comment

Uh oh!

pbearne Dec 6, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

westonruter commented Dec 13, 2024

Uh oh!

westonruter commented Dec 13, 2024

Uh oh!

westonruter commented Dec 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joemcgill left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

github-actions bot commented Dec 3, 2024 •

edited

Loading

westonruter commented Dec 13, 2024 •

edited

Loading