versusbassz/entity-viewer

Displays data (properties, custom fields) of WordPress entities (posts, users, terms, comments) for developers

Entity viewer

It's a WordPress plugin that displays properties and custom fields of WordPress entities (posts, users, terms, comments) for debugging/development purposes.

Features

• Supported entities: posts (including custom post types), users, terms, comments
• Displayed data: properties (e.g. ID, guid, post_type) and custom fields (e.g. _edit_lock, _thumbnail_id )
• Sorting by different conditions (ASC/DESC)
• Searching/filtering (with highlighting of found result)
• Pretty viewing of serialized data
• Auto-updating on Gutenberg's "publish/update" actions
• Manual updating without refreshing a whole page

How it works

The plugin displays the metabox on "edit" pages of supported WordPress entities in the WP Admin Panel.
The required role to access the info is Administrator for "Single site" mode and Super Admin for "Multisite".

Links

• Wordpress.org page: https://wordpress.org/plugins/entity-viewer/
• Changelog
• Roadmap

Versioning and stability

The project follows https://semver.org/

License

The license of the project is GPL v2 (or later)

entity-viewer's Issues

Setting: memorize a search query

Add development environment

Options:

• docker (custom setup)
• vagrant
• vvv
• wodby
• lando

Setting: enable/disable trimming of non-alpha characters before sorting

Compatibility with "Query monitor" (a tab with data)

Multisite support

Thoughts

• get_admin_url()
• plugins_url()
• capabilities

Capabilities, related to editing files (delete_plugins, etc.), are unsafe for relying on them.

Docs

• https://wordpress.org/support/article/roles-and-capabilities/
• https://developer.wordpress.org/reference/functions/get_admin_url/
  • first arg has to be null (a current site id as result)
• https://developer.wordpress.org/reference/functions/plugins_url/
  • Relies on define( 'WP_CONTENT_URL', get_option( 'siteurl' ) . '/wp-content' )

glob-parent security issue

Dependabot cannot update glob-parent to a non-vulnerable version
The latest possible version that can be installed is 3.1.0 because of the following conflicting dependency:

@babel/[email protected] requires glob-parent@^3.1.0 via @nicolo-ribaudo/[email protected]
The earliest fixed version is 5.1.2.

GHSA-ww39-953v-wcq6

CVE-2020-28469
high severity
Vulnerable versions: < 5.1.2
Patched version: 5.1.2
This affects the package glob-parent before 5.1.2. The enclosure regex used to check for strings ending in enclosure containing path separator.

Discussions in the babel repo

• babel/babel#13438
• babel/babel#13135

Enable Gutenberg compatibility logic only on pages where it exists (editing of post, pages, etc)

Notes

• WordPress/gutenberg#12200
• https://wordpress.stackexchange.com/questions/309862/check-if-gutenberg-is-currently-in-use/

Add browserlist

To package.json

Notes

• https://github.com/browserslist/browserslist

Move to React

To do after #6 (upd: done)

Subtasks

• Use real data from DB
• state management (React.Context ???) --- IMO, it isn't necessary for now, coz the widget is too small and independent + it doesn't have too much sub-components
• search for react-libraries to replace the current jquery-like ones
  • js-cookie library stays installed via npm
  • stupidtable removed
• wrapping layout for entities that don't support Metabox API

Notes

• https://reactjs.org/docs/create-a-new-react-app.html#creating-a-toolchain-from-scratch
• g: react trigger render from outside
  • https://stackoverflow.com/questions/31856712/update-component-state-from-outside-react-on-server-response
• https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event

Add an ability to toggle visibility of any field

The possible implemention:

• count values lengths on the backend and add a prop to the field, sort of toggle: true
• if the field is true add +/- toggle button (pos:a, r0, t0, visible on hover) to a related value
• the field has to be closed by default, a fixed part of the field has to be visible in this state (with gradient)

Add a github workflow to do releases on wp.org automatically

Shoud be triggered by creating a release in the Github repository.

Tasks

• deploy/release to wp-org
• upload same .zip file to a created release on github --- cancelled, for now (wp.org is a good place to download zip-releases of the plugin; added the separate issue for that #75)

Notes

Github Actions

• https://github.com/10up/action-wordpress-plugin-deploy (!!!)
• https://github.com/10up/action-wordpress-plugin-asset-update
• https://github.com/10up/actions-wordpress (is it an outdated meta-package ???)
• https://github.com/softprops/action-gh-release
• https://github.com/actions/upload-release-asset (archived)

Test this on https://github.com/versusbassz/sortable-id-columns --- (done, see the comment below)

Examples in other plugins

• cyr2lat

Chose names for the plugin

• visual name (on wp.org plugin's page - h1)
• wp.org slug
• github repo slug

Options:

• db-data-viewer (the goals of the project are wider)
• entity-viewer --- seems fit
• meta-viewer (looks good, the goals of the project are wider)
• metashark (copyright)
• datashark (copyright)
• metaui (copyright)
• meta-explorer (the goals of the project are wider)
• data-explorer ("data" is not an exact word for the goals)

The result

• visual name (on wp.org plugin's page - h1): Entity Viewer
• wp.org slug: entity-viewer
• github repo slug: entity-viewer

Setting: width of "id" column (in pixels)

default: 65px (see the plugin's CSS code)

Display _wp_old_slug fields as links

Integration with Heartbeat API

For example. for updating _edit_lock field.

Docs

• https://developer.wordpress.org/plugins/javascript/heartbeat-api/

i18n

The textdomain name: entity-viewer (the same as the slug of the plugin)
Also:

• the plugin has to be compatible with translate.wordpress.org
• add filter/setting to disable i18n if it's necessary --- filter vsm/is_plugin_allowed

Docs

• https://developer.wordpress.org/plugins/internationalization/
• https://developer.wordpress.org/block-editor/how-to-guides/internationalization/
• https://pippinsplugins.com/use-wp_localize_script-it-is-awesome/

Misc

• https://translate.wordpress.org/locale/ru/default/wp-plugins/?s=smtp

Setting: show/hide ACF technical fields

"Refresh" button

TODO after #7

Subtasks

• add "Refresh data" button to the top of the widget to the right of the "Search" functionality
• something for AJAX requests: axios | native fetch (caniuse) --- let's start with native fetch (95% compatible)
• Security: allow requests for REST API handler only for a user that "can_edit" requested item's data | capability "manage_options | delete_plugins ???" --- chose delete_users, for now
• nonce
• display smth if error happened
• "Done!" message (color: green) on successful update, getting hidden after 1.5 sec.
• display "Last update" even for an initial state
• lock the button during request
• phrase on the left: "Last updated: H:i:s am/pm"

Docs

• https://wordpress.org/support/article/roles-and-capabilities/
• https://codex.wordpress.org/WordPress_Nonces
• https://developer.wordpress.org/themes/theme-security/using-nonces/

Add useful info for Post::_edit_last field

Tasks

• Display a user's info: id, display name (, user_login ???)

Add an admin notice for installations with old PHP versions

For now the plugin doesn't show anything and doesn't get initialized if it's launched on a platform with outdated PHP version.

Docs

• https://developer.wordpress.org/reference/hooks/admin_notices/

Add nesting of displayed entities

For example, it should be possible to watch a metabox with a "last editor"'s user data (e.g., in modal window) when you explore _edit_lock field in the plugin's metabox on Post edit page

Check that the plugin displays the metabox on "Profile" page

Export data in CSV/JSON

Move to webpack

• SCSS
• modern ES6+ bundle

Docs

• https://webpack.js.org/configuration/mode/
• https://webpack.js.org/loaders/sass-loader/
• https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder

Notes

• webpack scss
  • https://www.robinwieruch.de/webpack-setup-tutorial
  • https://www.robinwieruch.de/webpack-babel-setup-tutorial
  • https://www.robinwieruch.de/webpack-sass

Highlight search results in data table

Library: https://www.npmjs.com/package/react-highlight-words

Notes

• google: react highlight text
  • https://www.npmjs.com/package/react-highlight-words
  • https://stackoverflow.com/questions/29652862/highlight-text-using-reactjs
• google: react highlight search results
  • https://medium.com/@krith/how-to-build-reliable-search-highlighting-for-your-product-2bf581b8289c
  • https://stackoverflow.com/questions/55248570/highlight-searched-text-in-react

A separate page for the plugin in wp-admin

To do after #15

Contains in tabs:

• settings if necessary
• functionality like in similar Yoast's plugin

Update required PHP version: 5.4+ -> 7.3+

The idea is to follow PHP's schedule:
- https://www.php.net/supported-versions.php
- https://www.php.net/eol.php

According to https://wordpress.org/about/stats/, versions 7.3, 7.4, 8.0 are 60% of the ecosystem. It's fine for a "dev-purposes" plugin IMO

About plugin headers: https://developer.wordpress.org/plugins/plugin-basics/header-requirements/

Add useful info for Post::_edit_lock field

Tasks

• Display visual time of a lock
• Display a user's info: id, display name (, user_login ???)

Add minimal supported WordPress core version + admin notice

The requirement is "a current and a previous versions of WordPress core".
For now, these versions are 5.6, 5.7

Docs

• https://developer.wordpress.org/plugins/plugin-basics/header-requirements/
• https://developer.wordpress.org/reference/hooks/admin_notices/

Update e2e tests codebase

• fix issues for updated dependencies (lucatume/wp-browser ^3.0)

Better/additional type of displaying complex (serialized) values

Probably, like in https://wordpress.org/plugins/display-metadata/ (github) or in symfony/var-dumper or smth else.

Docs

• https://www.php.net/manual/en/function.serialize.php --- see comments, they are useful

Solutions

(if we discuss unserialize results)

• https://symfony.com/doc/current/components/var_dumper.html (too much)
  • https://symfony.com/doc/current/components/var_dumper/advanced.html
  • https://github.com/symfony/var-dumper
• http://krumo.sourceforge.net/ (old ???)
  • https://github.com/kktsvetkov/krumo
  • http://krumo.kaloyan.info/
• https://github.com/kint-php/kint
• https://github.com/woodrowshigeru/InteractiveVarDump
• https://github.com/ospinto/dBug (old)
• https://github.com/hazardland/debug.php
• https://github.com/uuf6429/nice_r (old, archived)
• https://github.com/builtbybrayne/neat_html (without examples)

improved var_export()

• https://github.com/brick/varexporter
  • brick/varexporter#15
• https://github.com/symfony/var-exporter
• https://externals.io/message/112967

Also

• https://github.com/pradosoft/prado/blob/master/framework/Util/TVarDumper.php
• https://gist.github.com/justinhernandez/630770 (prettifying of var_export() )
• https://stackoverflow.com/a/6658706 (custom json prettifying function)
• https://stackoverflow.com/a/32327674 (custom variable dump function)
• https://stackoverflow.com/a/27343895 (custom variable dump function, to html)
• https://stackoverflow.com/a/26622751 (custom variable dump function, to html)
• https://stackoverflow.com/a/32514590 (custom variable dump function, to plain text)
• FirePHP (it isn't for current case, but it exists)
• xdebug (yeaah)

Links

• https://stackoverflow.com/questions/1168175/is-there-a-pretty-print-for-php
• https://stackoverflow.com/questions/2141585/a-more-pretty-informative-var-dump-alternative-in-php
• https://stackoverflow.com/questions/6292164/using-print-r-and-var-dump-with-circular-reference
• https://stackoverflow.com/questions/888/how-do-you-debug-php-scripts
• https://stackoverflow.com/a/36131176

Add README.md

Display meta_value=null as "null" block

Now it's displayed like an empty string, but it's null in the database.
Also: the column meta_value in the database has default=null setting. ofc.

Add PHP-filter to make it possible to change the plugin's default capability

Or any other similar approach, e.g.: a boolean filter "vsm/enabled_for_user"

Docs

• https://wordpress.org/support/article/roles-and-capabilities/

Display null and empty string value differently

Now null values are displayed as empty strings

Add CHANGELOG.md and changes to descriptions of previous releases

• Also adjust "How to release" section in the Wiki

Examples

• https://github.com/wp-cli/wp-cli/releases/tag/v2.5.0
• https://github.com/Yoast/wordpress-seo/releases/tag/16.6
• https://github.com/johnbillion/wp-crontrol/releases
• https://www.advancedcustomfields.com/changelog/

The result tags: New, Enhancement, Tweak, Fix, Dev, i18n, Maintenance, Security

If value is found in raw value of serialized field its confusing if user looks at search results in "pretty" mode

Maybe, it's better to display a message "Search query found in raw value of the field" below of "pretty" value (smth like that, can be shorter).

It's frequently reproduced by searching 1 on Users pages.

Visual diffs of changes after refreshing

Dynamic search (with hidding of not relevant fields) via input:text

Migrate from node-sass to sass (Dart implementation)

https://sass-lang.com/blog/libsass-is-deprecated

It's also related to one of security alerts from Github.

History

First was the Ruby implementation. It was abaddoned in 2019.
After that was the C++ implementation (libsass). It was deprecated in October 2020, and also its wrapper for nodejs: https://github.com/sass/node-sass
Now it's recommended to move to the Dart implementation.

Dart SASS

• https://sass-lang.com/dart-sass
• https://github.com/sass/dart-sass
• **sass-loader for webpack compatibility (done in 2018): webpack-contrib/sass-loader#435
  • https://webpack.js.org/loaders/sass-loader/

Add an ability to display guid as html link

and maybe other such fields in the future (wp_old_slug, etc). Other issue?

Add css:word-break (or smth like that) for meta-fields like _wp_attachment_metadata

Release on wordpress.org

Sub-tasks

• chose a new name for the plugin --- see the comment below
• comment-tags in the entry PHP-file (docs)
• readme.txt (sample, docs-1, docs-2)
  • by Vladimir Sklyar + link
  • main section
  • changelog
• rephrase admin noticies (display current/minimal versions)
• license
• a note about versioning (semver)

Update metabox content on Gutenberg "Publish/Update" actions

Notes

• https://developer.wordpress.org/block-editor/how-to-guides/backward-compatibility/meta-box/
• https://developer.wordpress.org/block-editor/reference-guides/packages/packages-data/#subscribe
• https://developer.wordpress.org/block-editor/reference-guides/data/data-core-editor/#didPostSaveRequestSucceed (and other related props)
• https://wordpress.stackexchange.com/questions/319054/trigger-javascript-on-gutenberg-block-editor-save

Misc

• https://stackoverflow.com/questions/52301472/using-wp-data-subscribe-properly
• https://wordpress.org/support/topic/using-gutenberg-dispatch-to-update-post/
• https://gist.github.com/n7studios/56fd05f19f5da26f19f6da0ccb57b144#file-post-to-social-php-L198
• old stuff
  • https://metabox.io/gutenberg-update/
  • https://metabox.io/gutenberg-and-meta-box/
  • https://metabox.io/meta-box-is-compatible-with-gutenberg/
  • https://css-tricks.com/managing-wordpress-metadata-in-gutenberg-using-a-sidebar-plugin/
  • https://wptavern.com/gutenberg-development-team-confirms-meta-box-api-will-not-be-formally-deprecated
• https://shellcreeper.com/custom-field-meta-box-in-gutenberg-editor/

Setting: Memorize sorting state

To do after #7

Add an ability to add custom entries for nesting

Do after: #43

It's for for users of the plugin.
For example, I add a custom field that contains an id of another entity item (post, user, etc), and I want to enable nesting for this field.
via filters ???

Highlight search results in id,name colums also

Initial issue: #23

Handle incorrect JSON (syntax error) on "refresh" response

Uncaught (in promise) SyntaxError: Unexpected token a in JSON at position 0

The snippet for inserting into the AJAX-handler to trigger the error:

sleep(2);
echo "askdjflkajdlfkj()()(()()()()()((";
die();

Add foundation for displaying data of entities themselves

The quite large task. Added a project for that: https://github.com/versusbassz/wp-meta-viewer/projects/2

Sub-tasks

• refactor backend of meta fields to a Fetcher-class
• "mysql" order for entity props
  • Fix visual problems (the width and wrapping of the "DB order" column in different situations)
• memorize a chosen tab (by entity type, stored in localStorage as a json hashmap)
  • TTL for stored value --- See: #62
• Improve displaying of tabs/sections names (human readable names, not ids)
• to do smth with post_content (related to #2)
• Handle wp_errors on the backend properly + display them on frontend

Misc

• add an issue for better displaying of terms (maybe, several tables in one entity tab) --- See: #51
• custom order (more convenient) for props of posts (to a separate issue) --- See: #52

Run tests on every change in main (Github actions workflow)