Skip to content

Add collapsible behavior to term edit page #1174

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.

Sign up for GitHub

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

Merged
gabrielcld2 merged 3 commits into from
May 25, 2026
Merged

Add collapsible behavior to term edit page #1174

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b36ae48
Add collapsible behavior to term edit page
gabriel-detassigny May 18, 2026
7ab989a
Build assets
gabriel-detassigny May 18, 2026
b56ae6a
Re-establish cursor: pointer to toggle element
gabriel-detassigny May 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion css/cloudinary.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion js/cloudinary.js
View file
Open in desktop

Large diffs are not rendered by default.

64 changes: 38 additions & 26 deletions php/templates/taxonomy-term-transformation-fields.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,32 +18,44 @@
$label = $tax_object->labels->singular_name;
?>
<?php foreach ( $this->taxonomy_fields as $context => $set ) : ?>
<tr>
<td colspan="2">
<h3>
<?php
echo esc_html(
sprintf(
// translators: The taxonomy label and the context.
__( 'Cloudinary %1$s %2$s Transformations', 'cloudinary' ),
$label,
ucwords( $context )
)
);
?>
</h3>
</td>
</tr>
<?php foreach ( $set as $setting ) : ?>
<tr class="form-field term-<?php echo esc_attr( $setting->get_slug() ); ?>-wrap">
<th scope="row">
<label for="cloudinary_<?php echo esc_attr( $setting->get_slug() ); ?>"><?php echo esc_html( $setting->get_param( 'title' ) ); ?></label>
</th>
<td>
<?php $setting->set_param( 'title', null ); ?>
<?php $setting->set_param( 'tooltip_text', null ); ?>
<?php $setting->get_component()->render( true ); ?>
<?php
$collapse_id = 'cld-collapse-' . sanitize_html_class( $context );
$heading = sprintf(
// translators: The taxonomy label and the context.
__( 'Cloudinary %1$s %2$s Transformations', 'cloudinary' ),
$label,
ucwords( $context )
);
// translators: The transformation context (e.g. Image, Video).
$toggle_label = sprintf( __( 'Toggle %s transformations', 'cloudinary' ), ucwords( $context ) );
?>
<tbody class="cloudinary-term-transformations">
<tr>
<td colspan="2">
<div class="cloudinary-collapsible__toggle" data-collapsible-target="<?php echo esc_attr( $collapse_id ); ?>">
<h3><?php echo esc_html( $heading ); ?></h3>
<button
type="button"
aria-expanded="false"
aria-controls="<?php echo esc_attr( $collapse_id ); ?>"
aria-label="<?php echo esc_attr( $toggle_label ); ?>"
><i class="dashicons dashicons-arrow-down-alt2"></i></button>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
<tbody id="<?php echo esc_attr( $collapse_id ); ?>" hidden class="cloudinary-term-transformations">
<?php foreach ( $set as $setting ) : ?>
<tr class="form-field term-<?php echo esc_attr( $setting->get_slug() ); ?>-wrap">
<th scope="row">
<label for="cloudinary_<?php echo esc_attr( $setting->get_slug() ); ?>"><?php echo esc_html( $setting->get_param( 'title' ) ); ?></label>
</th>
<td>
<?php $setting->set_param( 'title', null ); ?>
<?php $setting->set_param( 'tooltip_text', null ); ?>
<?php $setting->get_component()->render( true ); ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
<?php endforeach; ?>
17 changes: 13 additions & 4 deletions php/templates/taxonomy-transformation-fields.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,17 +33,26 @@

$cloudinary = get_plugin_instance();
?>
<div class="cloudinary-collapsible">
<div class="cloudinary-collapsible__toggle">
<div class="cloudinary-collapsible cloudinary-collapsible--card">
<div class="cloudinary-collapsible__toggle" data-collapsible-target="cld-collapse-taxonomy-transformations">
<h2>
<?php
// translators: The taxonomy label.
echo esc_html( sprintf( __( 'Cloudinary %s transformations', 'cloudinary' ), $tax_labels->singular_name ) );
?>
</h2>
<button type="button"><i class="dashicons dashicons-arrow-down-alt2"></i></button>
<?php
// translators: The taxonomy singular label (e.g. Category, Tag).
$toggle_label = sprintf( __( 'Toggle %s transformations', 'cloudinary' ), $tax_labels->singular_name );
?>
<button
type="button"
aria-expanded="false"
aria-controls="cld-collapse-taxonomy-transformations"
aria-label="<?php echo esc_attr( $toggle_label ); ?>"
><i class="dashicons dashicons-arrow-down-alt2"></i></button>
</div>
<div class="cloudinary-collapsible__content" style="display:none;">
<div id="cld-collapse-taxonomy-transformations" class="cloudinary-collapsible__content" hidden>
<div class="cld-more-details">
<?php
printf(
Expand Down
22 changes: 13 additions & 9 deletions src/css/components/_settings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,19 +275,23 @@
}

.cloudinary-collapsible {
width: 95%;
padding: 10px;
margin: 20px 0;
background-color: #fff;
border: 1px solid #ccd0d4;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
box-sizing: border-box;

&--card {
width: 95%;
padding: 10px;
margin: 20px 0;
background-color: #fff;
border: 1px solid #ccd0d4;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
box-sizing: border-box;
}

&__toggle {
cursor: pointer;
display: flex;
align-items: center;

h2 {
h2,
h3 {
margin: 0 !important;
}

Expand Down
51 changes: 29 additions & 22 deletions src/js/components/taxonomies.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,36 @@
const toggler = document.querySelector( '.cloudinary-collapsible__toggle' );
const togglers = document.querySelectorAll( '.cloudinary-collapsible__toggle' );
Copy link
Copy Markdown
Contributor

@PatelUtkarsh PatelUtkarsh May 22, 2026

Choose a reason for hiding this comment

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

💡 thought: The listener is on the wrapper .cloudinary-collapsible__toggle (a <div>). The <button> inside fires the click which bubbles up — that works, but:

  • The heading <h3>/<h2> is also inside the wrapper and becomes clickable without any keyboard equivalent or role / visible affordance.
  • The previous CSS provided cursor: pointer on &__toggle to telegraph clickability; this PR removes that line, so the wrapper is now silently clickable. Either restore cursor: pointer on the wrapper, or scope the listener to the button only.

Copy link
Copy Markdown
Collaborator Author

@gabrielcld2 gabrielcld2 May 25, 2026

Choose a reason for hiding this comment

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

thanks @PatelUtkarsh ! I've restored the cursor: pointer on the wrapper now b56ae6a Please have another look!


if ( toggler ) {
togglers.forEach( function ( toggler ) {
toggler.addEventListener( 'click', function () {
const content = document.querySelector(
'.cloudinary-collapsible__content'
);
const isHidden =
window
.getComputedStyle( content, null )
.getPropertyValue( 'display' ) === 'none';
const arrowIcon = document.querySelector(
'.cloudinary-collapsible__toggle button i'
);
const targetId = toggler.dataset.collapsibleTarget;
if ( ! targetId ) {
return;
}

const content = document.getElementById( targetId );
if ( ! content ) {
return;
}

content.style.display = isHidden ? 'block' : 'none';
// Toggle the content visibility.
content.hidden = ! content.hidden;

const arrowDown = 'dashicons-arrow-down-alt2';
const arrowUp = 'dashicons-arrow-up-alt2';
const button = toggler.querySelector( 'button' );
const arrowIcon = toggler.querySelector( 'button i' );

if ( button ) {
button.setAttribute( 'aria-expanded', String( ! content.hidden ) );
}

if ( arrowIcon.classList.contains( arrowDown ) ) {
arrowIcon.classList.remove( arrowDown );
arrowIcon.classList.add( arrowUp );
} else {
arrowIcon.classList.remove( arrowUp );
arrowIcon.classList.add( arrowDown );
if ( arrowIcon ) {
arrowIcon.classList.toggle(
'dashicons-arrow-down-alt2',
content.hidden
);
arrowIcon.classList.toggle(
'dashicons-arrow-up-alt2',
! content.hidden
);
}
} );
}
} );
Loading