ucf / athena-shortcodes-plugin Goto Github PK

Would be a WYSIWYG format update. Classes should be applicable to all elements.

Would need two shortcodes: [media] and [media-body]. Can't support nested media objects, and we probably shouldn't bother supporting media objects within unordered lists, but otherwise this should be pretty simple to implement.

Using the shortcode

[collapse-toggle element_type="button" target="#collapse-via-button"]Click to toggle collapsible[/collapse-toggle]

generates a <a> tag instead of a <button>, even though button is a valid element type for this component. See https://github.com/UCF/Athena-Shortcodes-Plugin/blob/master/shortcodes/sc-collapse.php#L253-L258

Ideally should be added as a WYSIWYG tool (not shortcode), applicable only to <hr> elements.

Would need to support:

Thickness

• .hr-2
• .hr-3

Color

• .hr-black
• .hr-white
• .hr-primary

Need shortcodes for:

• [pagination] (should probably also include a wrapper <nav> elem in the generated markup, which applies an aria-label set by the user)
• [page-item]
• [page-link]

Would have to add a note somewhere clarifying that popovers must be initialized manually for performance reasons.

Describe the bug

When a user inserts an image into the WYSIWYG editor via the media library, using the WYSIWYG's other alignment tools on that image results in inconsistent display between the WYSIWYG editor and frontend, due to this hook not affecting images aligned outside of the media library's alignment tool buttons.

Steps to Reproduce

1. Create a new post; add filler content and add an image to the content with any alignment setting.
2. Select the image, and adjust the alignment setting using either the primary WYSIWYG toolbar's left/center/right alignment buttons, or the image alignment buttons that appear above the image in the popover.
3. Save the post, and view it on the frontend. The alignment between what's shown in the WYSIWYG editor and what's shown on the frontend are different.

Expected Behavior

The WYSIWYG alignment buttons should adjust the alignment of the image as expected.

Possible Fix

Instead of using the format_image_output_classes() and align_wp_to_athena() methods to change WP's built-in alignment classes, just add style overrides to the plugin for .alignleft, .aligncenter, .alignright and .alignnone.

Your environment:

n/a

Additional context

Issue originally reported by the content team on Today. If we end up removing the image class replacement logic in favor of using WP's built-in alignment classes, we will (likely) need to update the Today Child Theme:
https://github.com/UCF/Today-Child-Theme/blob/master/src/scss/mixins/_single-post-content.scss
https://github.com/UCF/Today-Child-Theme/blob/master/src/scss/components/_figure.scss

See UCF/Today-Child-Theme#19 as an example. A snippet like this would help ensure that video embeds (YouTube, Vimeo, etc) are always responsive when included in page/post content.

However, since some sites may already be accommodating for this by adding wrapper markup manually, we'll need to either:

a) add an option, disabled by default, that activates the responsive embed wrapper markup, or

b) adds some additional logic to the_content (or elsewhere?) that detects duplicate <div class="embed-responsive ..."> wrappers and consolidates them.

Describe the bug

In the following scenario:

[nav class="nav-tabs" tablist="true"]
[nav-item][nav-link id="tab-a" class="active" data_toggle="tab" href="#tab-pane-a"]Tab A[/nav-link][/nav-item]
[nav-item][nav-link id="tab-b" data_toggle="tab" href="#tab-pane-b"]Tab B[/nav-link][/nav-item]
[nav-item][nav-link id="tab-c" data_toggle="tab" href="#tab-pane-c"]Tab C[/nav-link][/nav-item]
[/nav]

The generated markup for this nav gets flagged in accessibility scans because each .nav-item has role="listitem" (implicit for <li>), and the parent <ul>'s role has been overridden to role="tablist".

Steps to Reproduce

See above.

Expected Behavior

The inner .nav-links should be detected as the inner tab elements for the nav, and the inbetween .nav-items' roles should not interfere.

Possible Fix

Bootstrap addresses this in newer versions by applying role="presentation" to each .nav-item. We may want to add some attribute to [nav-item] that sets role="presentation" on the generated <li> for these scenarios, or potentially adjust [nav]'s callback to detect and tweak inner .nav-items when tablist="true".

Your environment:

n/a

Additional context

n/a

create_function() was deprecated as of PHP 7.2. Instances of this this function throughout the repo should be removed and replaced with anonymous functions to support newer versions of PHP.

See https://www.php.net/manual/en/function.create-function.php

Could create a simple [clearfix] shortcode for quick inline float adjustments.

Describe the bug
Adding the .stretched-link class to an anchor in the editor causes that anchor to then be clickable from anywhere within the tinymce editor, making it impossible to edit anything else on the page from that point on.

Steps to Reproduce

1. Create an anchor and add the .stretched-link css class in text mode.
2. Drop in a few paragraphs of lipsum to try to edit in text mode.
3. Switch to visual mode and try to select the lipsum. Only the link will be selectable from anywhere in the editor.
4. Switch to text mode and remove the class to be able to edit again.

Expected Behavior
An anchor with the .stretched-link class should limit its clickable area to the bounding box of the text when in the tinymce editor.

Possible Fix
Add specific logic to the athena-editor-styles.scss file that removes the behavior of .stretched-link when within the tinymce editor.

The inline width CSS that WordPress generally adds to a figcaption's parent figure field is missing. Without the width being defined on the parent figure it's causing long caption text to expand past the width of the image which causes layout issues. It appears to be overwritten when the format_caption_shortcode function is run via the img_caption_shortcode hook. It may be possible to resolve this by having this hook run at a different time. This appears function and hook appear to be firing after WordPress adds in the inline CSS which is removing the inline CSS.

https://ucf.github.io/Athena-Framework/utilities/sizing/

Includes:

• width, height, max-width, and max-height utility classes (WYSIWYG formats)

https://ucf.github.io/Athena-Framework/utilities/responsive-helpers/

Includes:

• Responsive embeds ([embed-responsive]) w/ratio options
• Responsive floats (WYSIWYG formats)

Describe the bug

To meet accessibility requirements, .collapse-toggles included within an .accordion with role="tablist" must have role="tab" set on them. Currently there is no way to adjust the role attribute on .collapse-toggles via the [collapse-toggle] shortcode.

Steps to Reproduce

n/a

Expected Behavior

.collapse-toggles included within an .accordion should each have role="tab".

Possible Fix

Consider adding a boolean shortcode attribute such as accordion_tab or tab, and update CollapseToggleSC->callback() to adjust the role attribute when it is true. Alternatively consider updating [accordion]'s callback to modify inner .collapse-toggle markup when needed.

Your environment:

n/a

Additional context

n/a

Would need to be added as WYSIWYG format options (not shortcodes).

Includes:

• .mark
• .small
• .initialism

Classes should be allowed on all elements.

Can be added to the 'Inline Text Styles' format group.

Description

• Update the [nav] shortcode to apply aria-orientation="vertical" on vertical dynamic navs
• Update [nav-link] to apply aria-selected instead of aria-expanded

Why it's Important

For consistency with updates being introduced in Athena v1.1.0 (UCF/Athena-Framework#205).

Alternatives

n/a

Possible Implementation

• For [nav]: if tablist is true and flex-column is a class set on the nav, apply aria-orientation="vertical"
• For [nav-link]: if data_toggle is set to pill or tab, set aria-selected on the link. If the active class is set on the link, set aria-selected to true; otherwise, set it to false.

Additional context

n/a

Support for these utilities would need to be added to the available WYSIWYG editor tools (not shortcodes).

Includes:

• Display (d-block, d-inline-block, etc; https://ucf.github.io/Athena-Framework/utilities/display-property/)
• Flexbox (https://ucf.github.io/Athena-Framework/utilities/flexbox/)
• Spacing (margin and padding, and all responsive variants; https://ucf.github.io/Athena-Framework/utilities/spacing/)
• Invisibility (https://ucf.github.io/Athena-Framework/utilities/invisible-content/) (already done)

All of these utilities should be applicable to all elements. We will need to figure out an elegant way of displaying available options for responsive spacing and flexbox utilities, since there are so many available options.

The project's CONTRIBUTING.md file needs to be updated to replace references and links to the ucf-wp Slack with the UCFTeam-CAMPUS-Wordpress Team.

See https://github.com/UCF/CM-WP-Plugin-Template/blob/master/CONTRIBUTING.md as a reference for necessary updates.

Need shortcodes for: [progress], [progress-bar]

• [progress-bar] needs options for specifying current, min, and max values for ARIA attributes
• Rendered [progress-bar] must apply role="progress" attr

We probably have to add support for this via shortcodes, since <picture> in particular isn't supported natively in the WYSIWYG editor, and while video elements are supported, their CSS classes can't be modified via the WYSIWYG.

Maybe something like:

Images: (auto-detect immediate inner elems and apply required classes to each, if necessary)

[media-background-container object-fit="cover"]
<img src="...">
[/media-background-container]

Videos: (auto-detect immediate inner elems and apply required classes to each)

[media-background-container object-fit="cover"]
[video ....]
[/media-background-container]

Pictures: (auto-detect immediate inner elems and apply required classes to each)

[media-background-container object-fit="cover"]
[picture]
[picture-source srcset="..." media="..." sizes="..."]  // maybe detect either an attachment ID attr, or valid srcset attr?  Checking for an attachment ID would allow WP to handle srcset generation
[picture-source srcset="..." media="..." sizes="..."]
[picture-source srcset="..." media="..." sizes="..."]
[picture-fallback src=""]  // maybe allow optional 'srcset' for folks using picturefill.js
[/picture]
[/media-background-container]

OR, if we don't mind being more Athena-specific, and are okay with limiting <picture> tag options:

[media-background-container object-fit="cover"]
[picture xs="" sm="" md="" lg="" xl="" fallback=""]  // attrs could be either IDs or URLs with is_numeric() detection?
[/media-background-container]

In this scenario, [media-background-container] should have a long list of available element_types, and allow extra CSS classes, ID, inline styles, etc. Might even want to allow it to be a <a> tag with link options (href, open in new window..)

Might also want to consider hooking into the default [video] shortcode to add class/ID/inline style attributes for convenience.

Description

Add style formats for the following:

• Font size: font-size-sm, font-size-base, font-size-lg
• Line height: line-height-0, line-height-1, line-height-2, line-height-3, line-height-4, line-height-5, line-height-6
• Maybe stretched links?

Why it's Important

For support for features added in Athena v1.1.0.

Alternatives

n/a

Possible Implementation

Add them

Additional context

n/a

Currently gutters can be manually modified on the image directly using the media library modal interface, or by manually modifying a generated [caption] shortcode for images with captions. However, it would be nice to provide a default set of gutters that works out of the box.

Maybe add a new field in the media library modal interface that lets you specify CSS classes for a [caption] shortcode?

https://ucf.github.io/Athena-Framework/utilities/colors/#background-colors

e.g. .bg-default-link, .bg-complementary-link, etc.

Would need to be added as WYSIWYG format options.

Describe the bug
The cache busting logic on this plugin has an incorrect variable name causing the production cache busting logic to fail. On this line, the variable $plugin['Version'] should be $plugin_data['Version'].

Description

See title. Depends on UCF/Athena-Framework#235 being resolved.

Why it's Important

See linked issue.

Alternatives

n/a

Possible Implementation

n/a

Additional context

n/a

Need shortcodes for: [dropdown], [dropdown-menu], [dropdown-item], [dropdown-divider], [dropdown-header]

Description

See title. Currently there is no means of adding an ARIA label to a tab pane generated by this shortcode.

Why it's Important

Unique ARIA labels for each tab pane would make it easier for screenreader users to distinguish them.

Alternatives

n/a

Possible Implementation

Add a labelledby attribute to this shortcode (like we have on the [modal] shortcode) for specifying the ID of the [nav-link] (the aria-labelledby value) which labels the tab pane.

Additional context

n/a

Need shortcodes for: [list-group], [list-group-item].

Element types for each will need to be configurable to allow for list items, links, etc.

Tab lists will need to have applicable role attributes applied to them depending on context.

Would have to add a note somewhere clarifying that popovers must be initialized manually for performance reasons.

Description

See title.

Why it's Important

To incorporate accessibility improvements introduced in v1.1.1, and to ensure we're including the latest+greatest updates.

Alternatives

n/a

Possible Implementation

Update package.json and re-run gulp tasks.

Additional context

n/a

Would need shortcodes for: [alert], [alert-link], [alert-heading].

.alert element can vary (div, aside...), but should always have the role="alert" attribute applied to it.

.alert-link should always be rendered as an <a> tag, and have similar link options as card links, buttons, etc.

.alert-heading element can vary (see card title options).

Would need shortcodes for:

• [navbar]
• [navbar-brand]
• [navbar-text]
• [navbar-toggler-icon]
• [navbar-toggler-text]

Could use/modify existing shortcodes for use in navbars:

• [collapse]
• [collapse-toggle]
• [nav] (would need to update to conditionally omit .nav class is .navbar-nav class is set)
• [nav-item], [nav-link]

Need shortcodes for: [button-group], [button-toolbar]. Won't be able to support nested button groups/dropdowns within groups.

• Need to apply appropriate aria labels and roles to both shortcodes' rendered html
• [button-group] should have an orientation option, which switches between a base .btn-group and .btn-group-vertical class

Describe the bug
Placing [container] shortcode within another [container] shortcode does not create nested containers. It instead closes all open Athena shortcode tags, such as rows, cols, etc.

Steps to Reproduce

1. Place container shortcodes within another container shortcode. Can be an immediate child, or not.
2. Save page and view elements panel.

Expected Behavior
Should create nested container divs. Useful for placing a container inside a container fluid to create a full-page background.

Possible Fix

Your environment:

• Device: Windows Desktop
• OS: Windows 10 21H1
• Browser & Version Chrome v111.0.5563.64
• WordPress Version: 6.1.1
• Plugin Version: 0.7.1

Additional context
Can use jumbotrons or Gutenberg groups to add the necessary divs instead.

ACF's WYSIWYG fields use a custom filter for formatting field contents--so shortcodes added to these fields won't have the <p>/<br> formatting fixes applied to them.

Need to add an additional hook to ACF's custom acf_the_content hook to fix.

Describe the bug
When using the "Custom" header content type, you get a TinyMCE editor that lets your format content differently. When using this option with Athena Shortcodes enabled, even leaving the TinyMCE editor blank, the whole page is duplicated inside of the header area on the final page.

In addition, we're not able to disable the TinyMCE editor support in this plugin's settings. Every other settings updates correctly, the TinyMCE support checkbox just re-checks itself after saving.

Example in QA: https://creolcmsqa.smca.ucf.edu/www/

Steps to Reproduce

1. Enable "custom" header content type on a page
2. Update page
3. Reload page, content is now duplicated in the header

Expected Behavior
The content of the TinyMCE editor should be reflected in the header.

Possible Fix

Perhaps something with how this handles TinyMCE? We don't even necessarily need this plugin to work in the headers, but we're also unable to disable TinyMCE support in the settings page of this plugin.

Your environment:

• Device: [e.g. iPhone6]
• OS: All
• Browser & Version: Any
• WordPress Version: 6.1.1
• Plugin Version: 0.7.5

Additional context

Description

When using the WYSIWYG editor on a post it would be nice if when selecting the Formats > blockquote-quotation option if it automatically added the blockquote class since it is required.

Why it's Important

If the blockquote class is required.

Alternatives

Possible Implementation

Additional context