Description

Following on from feedback in #34256 (review) this code quality improvement PR adds in a getFilename method to the url package, and updates a few ad hoc approaches in the codebase that extract a filename from a url to use this method instead. Kudos @Mamaduka for the suggestion.

Instead of using getPath as a dependency, this method follows the pattern used in getQueryString of using the URL constructor — this allows getFilename to treat a file at root level in an absolute path as a valid filename, which isn't supported by getPath (since it doesn't include a slash for the root level).

How has this been tested?

1. Running tests locally

npm run test-unit -- --testPathPattern packages/url/src/test/index.js

2. Test image block includes alt text within the editor that includes the filename

Add an image block and upload or add an image. Inspect the image element within the editor, and the alt text should reference the filename:

3. Convert an image block to a File block and check that it uses the filename

Convert the image to a File block, and the file name should be used as the File block's label:

4. Add a track file to a video block and check that the filename is used

1. Create a text file with the extension .vtt.
2. Add a video block and upload a video.
3. From the toolbar, select the Text Tracks button, and then click Upload underneath Add Tracks
4. Select your test .vtt file
5. The UI should show the correct filename:

Types of changes

Non-breaking change, code quality improvement.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).