Remove jQuery from user notes preview #529
Conversation
cbravobernal
changed the title
| } ); | ||
| // Make first child of the preview focusable. | ||
| if ( preview.firstChild ) { | ||
| preview.firstChild.setAttribute( 'tabindex', '0' ); |
There was a problem hiding this comment.
I'm getting an error when I test this, it looks like firstChild is a text node, not an html element.
There was a problem hiding this comment.
👍 Looks like a place for firstElementChild
There was a problem hiding this comment.
Fixed in 6762ec8
It's weird I didn't get the error until now 🤔
| spinner = document.createElement( 'span' ); | ||
| spinner.className = 'spinner'; | ||
| spinner.style.display = 'none'; |
There was a problem hiding this comment.
This does create the spinner correctly, but apparently it was never styled when we moved to the block theme, so nothing is visible. Not a problem for this PR though.
There was a problem hiding this comment.
Where can I check the old styles?
There was a problem hiding this comment.
I wouldn't copy over the old styles, but you could borrow the loading animation from this CSS (it's the loading state for images such as the pattern & style variation screenshots on Themes).
There was a problem hiding this comment.
The spinner didn't have any styled, an empty span was appearing. I added the style, but the time of the spinner is quite small.
Screen.Recording.2024-07-29.at.16.46.45.mov
What
Remove jQuery from
user-notes-preview.jsWhy
jQuery is known to inflate the bundle size of packages, and in most cases, it can be replaced with native language functionality.