Giter Site home page Giter Site logo

threadi / downloadlist Goto Github PK

View Code? Open in Web Editor NEW
6.0 2.0 0.0 4.22 MB

Provides a Wordpress-Gutenberg block for capturing a download list with file type specific icons.

Home Page: https://wordpress.org/plugins/download-list-block-with-icons/

PHP 83.79% JavaScript 14.79% SCSS 0.91% CSS 0.51%
gutenberg-blocks wordpress-plugin wordpress

downloadlist's Introduction

Download List with Icons

This repository is the database for the plugin Download List with Icons. This provides a Gutenberg block to manage a download list with file type specific icons.

Usage

After checkout go through the following steps:

  1. copy build/build.properties.dist to build/build.properties.
  2. modify the build/build.properties file - note the comments in the file.
  3. execute the command in build/: ant init
  4. after that the plugin can be activated in WordPress

Test

Run npm start to compile the Block Editor-Scripts for tests.

Release

  1. increase the version number in build/build.properties.
  2. execute the following command in build/: ant build
  3. after that you will finde in the release directory a zip file which could be used in WordPress to install it.

Translations

I recommend to use PoEdit to translate texts for this plugin.

generate pot-file

Run in main directory:

wp i18n make-pot . languages/download-list-block-with-icons.pot --exclude=docs,css,src,svn

update translation-file

  1. Open .po-file of the language in PoEdit.
  2. Go to "Translate" > "Update from POT-file".
  3. After this the new entries are added to the language-file.

export translation-file

  1. Open .po-file of the language in PoEdit.
  2. Go to File > Save.
  3. Upload the generated .mo-file and the .po-file to the plugin-folder languages/

generate json-translation-files

Run in main directory:

wp i18n make-json languages --no-purge

OR use ant in build/-directory: ant json-translations

Build blocks

Requirements

npm install

Run for development

npm start

Run for release

npm run build

Hint: will be called by ant-command mentioned above.

Check for WordPress Coding Standards

Initialize

composer install

Run

vendor/bin/phpcs --standard=ruleset.xml file

Repair

vendor/bin/phpcbf --standard=ruleset.xml file

Generate documentation

vendor/bin/wp-documentor parse classes --format=markdown --output=docs/hooks.md --prefix=downloadlist_

downloadlist's People

Contributors

threadi avatar dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar Huub avatar  avatar

Watchers

 avatar Huub avatar

downloadlist's Issues

dashicons stylesheet not enqueued

I only noticed this when logged out (as dashicons is loaded when logged in), but the dashicons stylesheet is not enqueued after 6b024cb, as it's trying to enqueue downloadlist-dashicons, which doesn't exist.

As a workaround, I've set up that handle as an alias of dashicons:

wp_register_style('downloadlist-dashicons', false, ['dashicons']);

Use overridable templates for html-output

Currently, the HTML templates are fixed. This should be changed:

  • Create template to define the surrounding list.
  • Create template to define a list entry.
  • Implement the templates in such a way that they can be overwritten, e.g. by a child theme, in order to adapt the output.

Add custom title and description per file in block

Add the following way to add individual titles and descriptions to individual files in the list:

  • Edit the title of a file within the list and save it only in the list, not in the Media DB.
  • Description as well.

This would allow individual titles and descriptions per file. One could use the same files in several lists with different labels.

Add possibility to set icons for file-types

Find a way to assign an icon to each file type. Tasks to be done for this:

  • Which icons to choose from? Dashicons, FontAwesome?
  • Create an interface to manage the icons. Where?

Add possibility to load files from a given directory

Add a way to load and list files from a defined directory on the server instead of from the media database.

  • How to set the title and description of the file if they are not in the media database?
  • Add tab in Media-Choose-Popup to select the directory. Setting is saved on the block.
  • Add button to re-read the directory with a click.
  • Read out and display files in the directory.
  • Possibly make available as a separate plugin that connects to downloadlist, as it would considerably exceed the intended scope of functions.

Attachments with MIME types that include a dot do not get a custom icon

For example, an attachment with MIME type application/vnd.openxmlformats-officedocument.spreadsheetml.sheet gets the following classes:

  • attachment-123
  • file_application
  • file_vnd.openxmlformats-officedocument.spreadsheetml.sheet

While the generated CSS selector is something like this:

.wp-block-downloadlist-list.iconset-dashicons .file_vnd.openxmlformats-officedocument.spreadsheetml.sheet:before {
    content: "\f495";
    font-family: "dashicons", sans-serif;
    font-size: 24px;
}

While the class that includes the "." is technically valid, the selector that's generated won't match it, as the browser will try and parse all the dots as a compound selector. To keep these class names but have the selector work, the dots in the class name would need to be escaped. I think ideally, the dots should not be used in the class names at all.

I've worked around this myself for now by replacing the dots with underscores via your filters, and then fixing them on the frontend by hoking the attribute_escape function:

/**
 * Convert dots to underscores in all mime types
 */
add_filters(
    ['downloadlist_dashicons_icons', 'downloadlist_bootstrap_icons', 'downloadlist_fontawesome_icons'],
    function ($dashicons) {
        return array_combine(
            str_replace(
                '.',
                '_',
                array_keys($dashicons)
            ),
            $dashicons
        );
    }
);

/**
 * Do the same conversion for the frontend output
 */
add_filter('attribute_escape', function ($safe_text, $text) {
    if (strpos($safe_text, 'vnd') === 0 && strpos($safe_text, '.') !== false) {
        return str_replace('.', '_', $safe_text);
    }

    return $safe_text;
}, 10, 2);

Add PDF thumbnail

Hi,
I have a used case where I need to display thumbnail for each file.
I have made my own version of your plugin for that.
This is what the result looks like http://typomet.re/i/rFmpp1
Front end

I don't have the skills and knowledge in Js, webpack, react and all so I only changed the php for the output and managed to add controls to hide thumbnail and filename based on the finished and deployed plugin files. So the block in gutenberg is unchanged, from you version, only the new controls are added.
I use the pdf thumbnail Wordpress provides when the servers as imagemagick and ghostscript. It shows file icon when there is no such thumbnail.
Ultimately i would like to add the possibility to choose a specific image to act as the thumbnail.

What I ve done is dirty but meets my need and in case you would like to evolve your plugin I could send you my version. I didn't know how to use webpack or the build process required so I can't really make a proper fork and Pull request.
Best regards.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.