Wordpress

-

WordPress 4.8 arrives with link boundaries and widget improvements, drops WMV and WMA support

WordPress.org today launched WordPress 4.8, which adds a slew of new features to the blog management tool “to express yourself and represent your brand.” You can download the new release, available in 38 languages, now from WordPress.org/Download (8.5MB).
WordPress is a content management system (CMS) that powers 25 percent of the web. The latest version is dubbed “Evans,” in honor of jazz pianist and composer William John “Bill” Evans.
WordPress 4.8 introduces link boundaries. If you’ve ever tried updating a link or the text around a link and found that the wrong text ends up being linked, this is for you. Link boundaries streamline the process of editing links, hopefully resulting in less frustration.
As for the widget improvements, you can now add an image to a widget without needing to know code, add any video from the Media Library to a sidebar on your site, and add a widget for any audio file in your Media Library. Last but not least, rich-text editing capabilities are now native for Text widgets: create lists, add emphasis, and insert links.
For those who want to improve their WordPress skills, the Events and News dashboard widget now draws your attention to nearby events. All upcoming WordCamps and official WordPress Meetups are now right there when you log in to your dashboard.
Other developer additions and changes include:
  • More Accessible Admin Panel Headings: New CSS rules mean extraneous content (like “Add New” links) no longer needs to be included in admin-area headings. These panel headings improve the experience for people using assistive technologies.
  • Removal of Core Support for WMV and WMA Files: As fewer and fewer browsers support Silverlight, file formats that require the presence of the Silverlight plugin are being removed from core support. Files will still display as a download link, but will no longer be embedded automatically.
  • Multisite Updates: New capabilities have been introduced to 4.8 with an eye towards removing calls to is_super_admin(). Additionally, new hooks and tweaks for more granular site control and user counts per network have been added.
  • Text-Editor JavaScript API: With the addition of TinyMCE to the text widget in 4.8 comes a new JavaScript API for instantiating the editor after page load. This can be used to add an editor instance to any text area, and customize it with buttons and functions.
  • Media Widgets API: The introduction of a new base media widget REST API schema to 4.8 opens up possibilities for even more media widgets (like galleries or playlists) in the future. The three new media widgets are powered by a shared base class that covers most of the interactions with the media modal. That class also makes it easier to create new media widgets and paves the way for more to come.
  • Customizer Width Variable: New responsive breakpoints have been added to the customizer sidebar to make it wider on high-resolution screens. Customizer controls should use percentage-based widths instead of pixels.
    • The team did not mention WordPress 4.9 or 5.0, but presumably the next version is already being worked on and will be released in a few months.

    How to Start Using Sass with WordPress Through NPM Scripts

    For any web developer, the word CSS is not something new. Despite the fact that CSS is an awesome programming/styling language, it comes with certain limitations which cannot be ignored. Thankfully, the CSS preprocessor languages like Syntactically Awesome Syle Sheets (Sass) and LESS have saved the day.
    In today’s post, I’m going to explain how you can use Sass with WordPress through NPM Scripts and provide you with an easy to use boilerplate. Let’s start with the basics.
    What is Sass?
    Sass is a CSS preprocessor language that helps developers write CSS in a better and more meaningful way. With Sass, you can integrate with features CSS does not support. These include basic math operators, mixins, nesting, variables, etc. Imagine using variables in CSS, for font-size, or theme colors. Sass makes that easy.
    How Does Sass Works?
    Being a preprocessor language, Sass performs a similar function like any such language would do. E.g. PHP preprocesses a script and generates an HTML output. So, Sass preprocesses .scss files and generates .css files as a result.
    Now your CSS files can be rendered by any browser. This part remains the same while using Sass. However, the difference is that you no longer write CSS directly. Instead, you write Sass and it is then preprocessed into a CSS file. Also, don’t worry, Sass is a lot like CSS itself.
    How is Sass Different from Normal CSS?
    Overall Sass is quite similar to CSS but offers a few differences. Some of these are:
  • The SCSS version of Sass is quite similar to CSS. You won’t have to learn anything new there except for a few things related to how to create variables and the mixins. The base syntax remains the same.
  • Sass uses nesting and indentation. This eliminates the need of descendant selectors which create several layers of code.
    • What Benefits Does Sass Bring to CSS?
    Sass is an incredibly easy-to-learn language. Technically speaking, it is considered to be the most powerful professional grade CSS extension which brings several benefits like:
  • You can create variables, nesting, mixins, import, partials, mathematical and logical operators, etc.
  • You can add dynamicity to your development process.
  • You can write better modular code. And modifying it becomes very easy.
    • Getting Started with Sass
    So, before you get started with this tutorial, let me share with you a boilerplate called WPSass (go ahead and star it) — which will get you set up for your project. I am going to explain how you can use it. If you have any issues, report to the GitHub repo and PR’s are welcome. By the way, I’d recommend you to star and watch the repository as it will improve over time.
    Let’s Get Started!
    To get started using Sass with WordPress you need to make sure that you have node installed. If not then you must download and install node first.
    Step 1: Install NodeJS & NPM
    After installing NodeJS you can verify the installation of both NodeJS and Node Package Manager (NPM) by typing the following commands. Once you’ve done this, you never have to do it again.
    node -v # v7.10.0 npm -v # 4.2.0
    node -v
    # v7.10.0
    npm -v
    # 4.2.0
    Step 2. Download package.json
    Next, you’ll download the package.json file inside the root folder of your WordPress plugin or theme. If you have cURL installed then you can run the following command to download it in one go (just make sure you open the root folder of your WordPress plugin or WordPress theme and download the package.json file in it).
    curl -L 'https://git.io/wpsass' -o package.json
    1
    curl -L 'https://git.io/wpsass' -o package.json
    Step 3: Installing Node Dependencies
    At this point, we are in the root folder of our WordPress plugin or theme. Now it’s time to install the Node Dependencies. In the terminal run the following command and wait for it to download all the NodeJS dependencies. Once again, it’s a one time process and can take about a minute depending on the internet speed.
    # For MAC OS X run the following command with super user sudo npm install # For Linux run the following command npm install
    # For MAC OS X run the following command with super user
    sudo npm install
    # For Linux run the following command
    npm install
    Step 4: Configure NPM Scripts
    Now we are going to configure the NPM scripts. There are only two of them. If you open the package.json file, you’ll find two such scripts there i.e.
    "scripts": { "css": "node-sass --output-style compressed --include-path scss assets/css/source.scss style.css", "watch": "nodemon -e scss -x \"npm run css\"" },
    "scripts": {
      "css": "node-sass --output-style compressed --include-path scss assets/css/source.scss style.css",
      "watch": "nodemon -e scss -x \"npm run css\""
    },
    While you are working with your own css script, you’ll need to change the following:
  • SCSS Source File Path & Name — assets/css/source.scss
  • Destination CSS File Path & Name — style.css
    • NOTE: That currently, this little app has following file structure:
    ├── assets | └── css | ├── partial | | ├── base.scss | | └── variables.scss | ├── source.scss | └── vendor | └── normalize.css ├── index.html ├── package.json └── style.css
    ├── assets
        |  └── css
        |     ├── partial
        |     |  ├── base.scss
        |     |  └── variables.scss
        |     ├── source.scss
        |     └── vendor
        |        └── normalize.css
        ├── index.html
        ├── package.json
        └── style.css
    Here, source.scss is the source file for the SCSS files, which imports files from partials and vendor directory. This gets compiled into a style.css file in the root of our project as configured in the npm script.
    Step 5: Run NPM Scripts
    All that’s left now is for you to run the NPM script in the root folder of your WP project — where you downloaded the package.json file.
    NOTE: Before you run, make sure there is a source SCSS file included. Otherwise running the script will display this error An output directory must be specified when compiling a directory.
    # Compile CSS. npm run css
    # Compile CSS.
    npm run css
    # Watch changes in SCSS files and compile CSS automatically. npm run watch
    # Watch changes in SCSS files and compile CSS automatically.
    npm run watch
    Conclusion
    For more than two decades I have had been using CSS to build websites, like everyone else. But the moment I was introduced to Sass, about four years ago, I instantly turned to it. Likewise, many web developers have stepped up their game by showing their interest in Sass for WordPress theme and plugin development. It is now your turn. If you’ve have been still waiting to jump the ship, it doesn’t get any easier than this WPSass boilerplate.
    As usual, don’t hesitate to leave any questions or comments below, and I’ll aim to respond to each of them.

    Comments

    Post a Comment

    Popular posts from this blog

    -
    GreenMantra™ Receives $2.2 Million in Funding for Polystyrene CleanTech Innovation From Sustainable Development Technology Canada BRANTFORD, Ontario, Aug. 9, 2017 /PRNewswire/ -- GreenMantra Technologies, a rapidly growing clean technology company that produces high-value polymers from waste plastics, will receive $2.2 million from Sustainable Development Technology Canada (SDTC) to be used toward construction of a demonstration plant that will convert waste polystyrene into modified styrenic polymers for use in inks, foam insulation and other applications. GreenMantra team, local Members of Parliament Bryan May and Marwan Tabbara, and the Honourable Navdeep Bains, Minister of Innovation, Science and Economic Development The Honourable Navdeep Bains, Minister of Innovation, Science and Economic Development, announces $15.5M in funding for six companies, including GreenMantra Technologies, through Sustainable Development Technology Canada (SDTC) The funding was announced yesterda...
    Read more
    -
    Image
    How to Send Web Pages From Your Phone to Your PC It isn’t hard to go from reading an article on your phone to reading it on your laptop. All you need to do is remember where you found it, right? But searching for something you already have in front of you is redundant, especially since companies like Google, Microsoft, and Apple all have ways to take what’s on your phone and bring it to your desktop in an instant. Chances are, with a few settings tweaks, you can enable the feature right now. Microsoft’s “Continue on PC” is Device Agnostic The company’s new “Continue on PC” feature is a site sharing tool for both Android and iOS devices. It exists as an app that lives in your device’s “share sheet,” the icon that lets you perform actions like sharing images, sites, or messages to social media services or other apps. Hit your share icon, select “Continue on PC” and watch the page you’re looking at appear on the corresponding screen. You can download Continue on PC in the App Sto...
    Read more

    HUAWEI

    -
    Image
    Huawei Mate 10 Pro vs Mate 9 Image Shows Design Changes The Huawei Mate 10 series are slated to get unveiled in the third week of this month. Speculations have revealed that the Mate 10 series will include four smartphones such as Mate 10, Mate 10 Pro, Mate 10 Lite and Mate 10 Porsche Design. A new image of the Mate 10 Pro that compares it with Mate 9 from last year has surfaced. The image shows the design changes that the Chinese manufacturer has introduced on Mate 10 Pro. Even though the dimensions of the Mate 10 Pro are not available, the above image does reveal that the handset is slightly slimmer and shorter than the predecessor model. This could be because the Mate 10 Pro is speculated to feature a 6-inch display with an aspect ratio of 18:9. The Mate 9 features a 5.9-inch display with an aspect ratio of 16:9. The Huawei Mate 9 has a metallic unibody chassis. However, the Mate 10 Pro is speculated to come with a glass back. The design of the dual rear cameras has been mod...
    Read more