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

    -
    Image
    KICKSTARTER: Sequent Supercharger Self Charging Smart Watch We thought we would kickstart the week, (no pun intended…or was it?) with a look at the Sequent Supercharger, the first self-winding, self-charging, cable-free smartwatch. It’s a Kickstarter funded smart watch designed by Swiss designer Adrian Buchmann that has even traditional watch purists sitting up and paying attention for it does for the smart watch what Seiko did for the analog watch many years ago. It runs on kinetic energy and is therefore completely cable free. The more you move around, the faster it charges. The watch is made by Swiss watchmakers, designers and engineers who have teamed up with the best partners in each manufacturing sector. The 42mm watch is being funded energetically too. With 9 days still to go, the Sequent Supercharger has been pledged CHF617,168 from an CHF 80,000 goal. Because you generate the energy for the watch yourself, it is 100% clean energy, and the watch includes the latest
    Read more
    -
    Image
    Too many exams, too little sport: experts discuss barriers to participation Children today are 'too busy' for sport, experts have argued. Photo: Caters By Rosa Silverman 4:06PM BST 09 Aug 2012 :: Lack of understanding of sports by teachers Not every PE teacher understands every sport. Some sports, such as hockey, may appear too complicated to teachers, who are consequently deterred from teaching them, according to England Hockey. “Hockey is sometimes seen as a technical sport because of all the rules,” Holly Woodford, the organisation’s development director, said. “People do not always understand why the umpire’s blowing the whistle when they watch it. We have tried to make it easier for teachers to teach hockey in schools by launching packages to explain the game to them.” Only half of all secondary schools teach the sport, partly due to limited budgets, she said. It is cheaper to buy one football for 30 pupils than 30 hockey sticks. But the
    Read more

    technology

    -
    Image
      For the processes and products of other manufacturing industries, see stick; clothing and footgear assiduity; ingrain; rackarock; possession casement; dendrology; alchemical diligence; man-made fibre; epigene coating; papermaking; sugar soap and detergent; fabric. Some argue the Internet is reprogramming our brains for the discomfit, as skilled by abate IQ scores, and that new technologies and platforms like the Internet are detriment attention spams, the skill to condense, and fulfill simple toil. For more on the contest over artificial advice, call ProCon.org. What is technology? Technology is the request of expert learning to the practical intention of earthling energy or, as it is sometimes phrased, to the change and manipulation of the human surrounding. Others argue AI poses hazardous solitude risks, exacerbates racism by regularize community, and suffering workers their jobs suggestion to better nonemployment. Is Internet technology "poem us stupid"? Whether Internet
    Read more